1

src/views/superAdminCenter/channel/index.vue

@@ -7,16 +7,7 @@
             <el-button type="primary" size="mini" @click="display = 'detail'">添加信息</el-button>
           </el-col>
           <el-col :span="24" class="list">
-            <data-table
-              :fields="fields"
-              :data="list"
-              :total="total"
-              @query="search"
-              :opera="opera"
-              @edit="toEdit"
-              @delete="toDelete"
-              :toFormat="toFormat"
-            ></data-table>
+            <data-table :fields="fields" :data="list" :total="total" @query="search" :opera="opera" @edit="toEdit" @delete="toDelete"></data-table>
           </el-col>
         </span>
         <span v-else>
@@ -24,105 +15,26 @@
             <el-button type="primary" size="mini" @click="back()">返回</el-button>
           </el-col>
           <el-col :span="24" class="detail">
-            <el-form :model="form" :rules="rules" ref="form" label-width="80px">
-              <el-form-item label="标题" prop="name">
-                <el-input v-model="form.title" placeholder="请输入标题"></el-input>
-              </el-form-item>
-              <el-form-item label="省份">
-                <el-select v-model="form.province" placeholder="请选择省份" @change="changeshenge">
-                  <el-option v-for="item in option" :key="item.code" :label="item.name" :value="item.code"> </el-option>
-                </el-select>
-              </el-form-item>
-              <el-form-item label="市">
-                <el-select v-model="form.place" placeholder="请选择市">
-                  <el-option v-for="item in options" :key="item.code" :label="item.name" :value="item.code"> </el-option>
-                </el-select>
-              </el-form-item>
-              <el-form-item label="信息来源">
-                <el-input v-model="form.orgin" placeholder="请输入信息来源"> </el-input>
-              </el-form-item>
-              <el-form-item label="主办方">
-                <el-input v-model="form.sponsor" placeholder="请输入主办方"> </el-input>
-              </el-form-item>
-              <el-form-item label="承办方">
-                <el-input v-model="form.organizer" placeholder="请输入承办方"> </el-input>
-              </el-form-item>
-              <el-form-item label="简介">
-                <el-input type="textarea" v-model="form.desc" placeholder="请输入简介"></el-input>
-              </el-form-item>
-              <el-form-item label="发布时间">
-                <el-date-picker v-model="form.create_time" type="date" placeholder="请选择发布时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
-                </el-date-picker>
-              </el-form-item>
-              <el-form-item label="图片">
-                <upload :limit="1" :data="form.image_path" type="image_path" :url="'/files/imgpath/upload'" @upload="uploadSuccess"></upload>
-              </el-form-item>
-              <el-form-item label="视频列表">
-                <el-col :span="24">
-                  <el-button type="primary" size="mini" @click="dialog = true">添加信息</el-button>
-                </el-col>
-                <el-col :span="24" class="videodata">
-                  <el-table :data="form.videodata" style="width: 100%" border>
-                    <el-table-column type="index" width="50" label="序号" align="center"> </el-table-column>
-                    <el-table-column prop="name" label="视频名称" align="center" show-overflow-tooltip> </el-table-column>
-                    <el-table-column prop="start_time" label="开始时间" align="center" show-overflow-tooltip> </el-table-column>
-                    <el-table-column prop="end_time" label="结束时间" align="center" show-overflow-tooltip> </el-table-column>
-                    <!-- <el-table-column prop="url" label="路径" align="center" show-overflow-tooltip> </el-table-column> -->
-                    <el-table-column label="操作" align="center">
-                      <template v-slot="scoped">
-                        <el-button type="text" @click="delAttend(scoped.$index, scoped.row)" size="small">删除</el-button>
-                      </template>
-                    </el-table-column>
-                  </el-table>
-                </el-col>
-              </el-form-item>
-              <el-form-item>
-                <el-button type="primary" @click="submitForm('form')">信息保存</el-button>
-              </el-form-item>
-            </el-form>
+            <data-form :data="form" :fields="formFields" @save="toSave" :rules="rules">
+              <template #options="{item}">
+                <template v-if="item.model === 'type'">
+                  <el-option v-for="(i, index) in typelist" :key="index" :label="i.name" :value="i.id"></el-option>
+                </template>
+              </template>
+            </data-form>
           </el-col>
         </span>
       </el-col>
     </el-row>
-    <el-dialog title="添加信息" :visible.sync="dialog" width="40%" :before-close="dialogclose">
-      <el-form ref="videoform" :model="videoform" label-width="80px" class="videoform">
-        <el-form-item label="视频名称">
-          <el-input v-model="videoform.name" placeholder="请输入视频名称"> </el-input>
-        </el-form-item>
-        <el-form-item label="开始时间">
-          <el-date-picker v-model="videoform.start_time" type="datetime" placeholder="请选择开始时间" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="结束时间">
-          <el-date-picker v-model="videoform.end_time" type="datetime" placeholder="请选择开始时间" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="路径">
-          <uploaddock
-            :limit="1"
-            :data="videoform.url"
-            type="url"
-            listType=""
-            :url="'/files/url/upload'"
-            @upload="videosuccess"
-            @delete="videodelete"
-          ></uploaddock>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="submitVideo">保存</el-button>
-        </el-form-item>
-      </el-form>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import upload from '@/components/uploadone.vue';
-import uploaddock from '@/components/uploaddock.vue';
 import dataTable from '@/components/data-table.vue';
+import dataForm from '@/components/form.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
-const { mapActions: place } = createNamespacedHelpers('place');
 const { mapActions: channel } = createNamespacedHelpers('channel');
+const { mapActions: markettype } = createNamespacedHelpers('markettype');
 
 export default {
   metaInfo() {
@@ -132,8 +44,7 @@ export default {
   props: {},
   components: {
     dataTable,
-    upload,
-    uploaddock,
+    dataForm,
   },
   data: function() {
     return {
@@ -152,35 +63,32 @@ export default {
       ],
       fields: [
         { label: '标题', prop: 'title' },
-        { label: '省份', prop: 'province', format: true },
-        { label: '市区', prop: 'place', format: true },
-        { label: '主办方', prop: 'sponsor' },
-        { label: '承办方', prop: 'organizer' },
+        { label: '来源', prop: 'orgin' },
+        { label: '发布时间', prop: 'create_time' },
       ],
       list: [],
       total: 0,
       // 添加信息
-      form: {
-        videodata: [],
-      },
-      rules: {
-        name: [{ required: false, message: '请输入标题', trigger: 'blur' }],
-      },
-      // 地址
-      option: [],
-      options: [],
-      // 视频信息
-      dialog: false,
-      videoform: {},
+      form: {},
+      rules: {},
+      formFields: [
+        { label: '信息类型', model: 'type', type: 'select' },
+        { label: '标题', model: 'title' },
+        { label: '来源', model: 'orgin' },
+        { label: '简介', model: 'desc', type: 'textarea' },
+        { label: '发布时间', model: 'create_time', type: 'date' },
+      ],
+      // 类型
+      typelist: [],
     };
   },
   async created() {
-    await this.searchplace();
+    await this.searchtype();
     await this.search();
   },
   methods: {
+    ...markettype({ markettypeList: 'query' }),
     ...channel(['query', 'delete', 'update', 'create']),
-    ...place({ palcequery: 'query', palcefetch: 'fetch' }),
     // 查询
     async search({ skip = 0, limit = 10, ...info } = {}) {
       if (this.user.role != '1') info.user_id = this.user.uid;
@@ -189,29 +97,29 @@ export default {
       this.$set(this, `total`, res.total);
     },
     // 提交
-    submitForm(formName) {
-      this.$refs[formName].validate(async valid => {
-        if (valid) {
-          let data = this.form;
-          if (data.id) {
-            let res = await this.update(data);
-            if (this.$checkRes(res)) {
-              this.$checkRes(res, '修改成功', '修改失败');
-              this.back();
-            }
-          } else {
-            data.user_id = this.user.uid;
-            let res = await this.create(data);
-            if (this.$checkRes(res)) {
-              this.$checkRes(res, '创建成功', '创建失败');
+    async toSave({ data }) {
+      if (data.id) {
+        let res = await this.update(data);
+        if (this.$checkRes(res)) {
+          this.$checkRes(res, '修改成功', '修改失败');
+          this.back();
+        }
+      } else {
+        data.user_id = this.user.uid;
+        let res = await this.create(data);
+        if (this.$checkRes(res)) {
+          this.$checkRes(res, '创建成功', '创建失败');
+          this.$alert(`房间号：${res.data.room_id}` + `密码：${res.data.passwd};`, '成功', {
+            dangerouslyUseHTMLString: true,
+            confirmButtonText: '确定',
+            type: 'success',
+            center: true,
+            callback: action => {
               this.back();
-            }
-          }
-        } else {
-          console.log('error submit!!');
-          return false;
+            },
+          });
         }
-      });
+      }
     },
     // 修改
     toEdit({ data }) {
@@ -243,61 +151,14 @@ export default {
         })
         .catch(() => {});
     },
-    // 查询地址
-    async searchplace() {
-      let level = 1;
-      let res = await this.palcequery({ level });
-      this.$set(this, `option`, res.data);
-      level = 2;
-      res = await this.palcequery({ level });
-      this.$set(this, `options`, res.data);
-    },
-    // 选择市区
-    async changeshenge(value) {
-      let level = 2;
-      let parent = value;
-      let res = await this.palcequery({ level, parent });
-      this.$set(this, `options`, res.data);
-    },
-    // 图片
-    uploadSuccess({ type, data }) {
-      this.$set(this.form, `${type}`, data.uri);
-    },
-    // 过滤科目名称
-    toFormat({ model, value }) {
-      if (model == 'province') {
-        const res = this.option.find(f => f.code == value);
-        if (res) return res.name;
-      } else if (model == 'place') {
-        const res = this.options.find(f => f.code == value);
-        if (res) return res.name;
+    // 查询字典表
+    async searchtype() {
+      // 类型
+      let res = await this.markettypeList({ category: '04' });
+      if (this.$checkRes(res)) {
+        this.$set(this, `typelist`, res.data);
       }
     },
-    // 视频信息
-    submitVideo() {
-      let data = this.videoform;
-      this.form.videodata.push(data);
-      this.dialogclose();
-    },
-    // 删除
-    delAttend(index, val) {
-      this.form.videodata.splice(index, 1);
-      this.$message({
-        message: '删除专利信息成功',
-        type: 'success',
-      });
-    },
-    // 关闭
-    dialogclose() {
-      this.videoform = {};
-      this.dialog = false;
-    },
-    videosuccess({ type, data }) {
-      this.$set(this.videoform, `${type}`, data.uri);
-    },
-    videodelete(index) {
-      this.$set(this.videoform, `url`, null);
-    },
   },
   computed: {
     ...mapState(['user']),