|
|
@@ -0,0 +1,208 @@
|
|
|
+<template>
|
|
|
+ <div id="index">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-col :span="24" class="leftTop"> <span>|</span> <span>图文管理</span> </el-col>
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <el-col :span="24" class="top">
|
|
|
+ <el-button type="primary" size="mini" @click="dialog = true">添加信息</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="list">
|
|
|
+ <data-table :fields="fields" :opera="opera" :data="list" :total="total" @edit="toEdit" @delete="toDelete" @query="search"></data-table>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-dialog title="信息管理" :visible.sync="dialog" @closed="handleClose" width="50%" :append-to-body="true">
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
|
+ <el-form-item label="信息内容" prop="brief">
|
|
|
+ <el-input v-model="form.brief" type="textarea" placeholder="请输入信息内容"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="图片" prop="image">
|
|
|
+ <upload
|
|
|
+ :limit="6"
|
|
|
+ :data="form.image"
|
|
|
+ :uploadBtn="true"
|
|
|
+ type="image"
|
|
|
+ :url="`/files/image/upload`"
|
|
|
+ @upload="uploadSuccess"
|
|
|
+ @delete="uploadDelete"
|
|
|
+ ></upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="视频文件" prop="file_path">
|
|
|
+ <uploadfile
|
|
|
+ :limit="1"
|
|
|
+ :data="form.file_path"
|
|
|
+ type="file_path"
|
|
|
+ listType=""
|
|
|
+ :url="'/files/imgpath/upload'"
|
|
|
+ @upload="sucfile"
|
|
|
+ @delete="delfile"
|
|
|
+ ></uploadfile>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="save">保存</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import upload from '@/components/upload.vue';
|
|
|
+import uploadfile from '@/components/uploaddock.vue';
|
|
|
+import dataTable from '@/components/data-table.vue';
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+const { mapActions: imgtxtdock } = createNamespacedHelpers('imgtxtdock');
|
|
|
+import moment from 'moment';
|
|
|
+export default {
|
|
|
+ name: 'index',
|
|
|
+ props: {},
|
|
|
+ components: {
|
|
|
+ dataTable,
|
|
|
+ upload,
|
|
|
+ uploadfile,
|
|
|
+ },
|
|
|
+ data: function() {
|
|
|
+ return {
|
|
|
+ // 展会id
|
|
|
+ dock_id: '',
|
|
|
+ opera: [
|
|
|
+ {
|
|
|
+ label: '修改',
|
|
|
+ icon: 'el-icon-edit',
|
|
|
+ method: 'edit',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '删除',
|
|
|
+ icon: 'el-icon-delete',
|
|
|
+ method: 'delete',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ fields: [
|
|
|
+ { label: '信息内容', prop: 'brief' },
|
|
|
+ { label: '发布时间', prop: 'create_date' },
|
|
|
+ ],
|
|
|
+ list: [],
|
|
|
+ total: 0,
|
|
|
+ // 添加数据
|
|
|
+ dialog: false,
|
|
|
+ form: {},
|
|
|
+ rules: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ async created() {
|
|
|
+ this.$set(this, `dock_id`, this.user.uid);
|
|
|
+ await this.search();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...imgtxtdock(['query', 'create', 'update', 'delete']),
|
|
|
+ async search({ skip = 0, limit = 10, ...info } = {}) {
|
|
|
+ let res = await this.query({ skip, limit, dock_id: this.dock_id, ...info });
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ for (const val of res.data) {
|
|
|
+ let create_date = moment(val.meta.createdAt).format('yyyy-MM-DD hh:mm');
|
|
|
+ val.create_date = create_date;
|
|
|
+ }
|
|
|
+ this.$set(this, `list`, res.data);
|
|
|
+ this.$set(this, `total`, res.total);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 修改
|
|
|
+ toEdit({ data }) {
|
|
|
+ this.$set(this, `form`, data);
|
|
|
+ this.dialog = true;
|
|
|
+ },
|
|
|
+ // 保存
|
|
|
+ async save() {
|
|
|
+ let data = this.form;
|
|
|
+ if (data.id) {
|
|
|
+ let res = await this.update(data);
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$message({
|
|
|
+ message: '修改信息成功',
|
|
|
+ type: 'success',
|
|
|
+ });
|
|
|
+ this.handleClose();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ data.dock_id = this.dock_id;
|
|
|
+ data.user_name = this.user.adminuser;
|
|
|
+ let res = await this.create(data);
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$message({
|
|
|
+ message: '添加信息成功',
|
|
|
+ type: 'success',
|
|
|
+ });
|
|
|
+ this.handleClose();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 删除
|
|
|
+ async toDelete({ data }) {
|
|
|
+ let res = await this.delete(data.id);
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$message({
|
|
|
+ message: '删除信息成功',
|
|
|
+ type: 'success',
|
|
|
+ });
|
|
|
+ this.search();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 取消
|
|
|
+ handleClose() {
|
|
|
+ this.form = {};
|
|
|
+ this.dialog = false;
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ // 图片
|
|
|
+ uploadSuccess({ type, data }) {
|
|
|
+ let arr = _.get(this.form, type);
|
|
|
+ if (_.isArray(arr)) {
|
|
|
+ let datas = { name: data.name, url: data.uri };
|
|
|
+ this.form[type].push({ name: data.name, url: data.uri });
|
|
|
+ } else {
|
|
|
+ let newArr = [{ name: data.name, url: data.uri }];
|
|
|
+ this.$set(this.form, `${type}`, newArr);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 删除图片
|
|
|
+ uploadDelete(index) {
|
|
|
+ this.form.image.splice(index, 1);
|
|
|
+ },
|
|
|
+ // 视频文件
|
|
|
+ sucfile({ type, data }) {
|
|
|
+ this.$set(this.form, `${type}`, data.uri);
|
|
|
+ },
|
|
|
+ delfile(index) {
|
|
|
+ this.$set(this.form, `file_path`, '');
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['user']),
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.leftTop {
|
|
|
+ font-size: 18px;
|
|
|
+ width: 96%;
|
|
|
+ height: 41px;
|
|
|
+ line-height: 35px;
|
|
|
+ border-bottom: 1px solid #e5e5e5;
|
|
|
+ position: relative;
|
|
|
+ bottom: 1px;
|
|
|
+ margin: 10px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #22529a;
|
|
|
+}
|
|
|
+.info {
|
|
|
+ padding: 0 38px 0 10px;
|
|
|
+ .top {
|
|
|
+ text-align: right;
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
