update

src/components/e-upload.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="e-upload">
-    <el-upload :action="url" :http-request="upload" list-type="picture-card" :fileList="fileList" :on-remove="onRemove">
+    <el-upload :action="url" :http-request="upload" list-type="picture-card" :fileList="fileList" :on-remove="onRemove" :limit="limit" :on-exceed="onExceed">
       <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
     </el-upload>
   </div>
@@ -14,6 +14,7 @@ export default {
   name: 'eUpload',
   props: {
     url: { type: String, required: true },
+    limit: { type: Number },
     fileList: { type: Array },
   },
   model: {
@@ -40,6 +41,9 @@ export default {
       const index = this.fileList.findIndex((f) => f.url === file.url);
       this.fileList.splice(index, 1);
     },
+    onExceed() {
+      this.$message.error(`只能上传${this.limit}个`);
+    },
   },
   computed: {
     ...mapState(['user', 'menuParams']),

src/views/site/index.vue

@@ -17,14 +17,50 @@
       </template>
     </data-table>
     <div v-else>
-      <el-row type="flex" align="middle" justify="end">
-        <el-col :span="4">
-          <el-button type="primary" @click="view = 'list'" size="mini">返回</el-button>
-        </el-col>
-      </el-row>
       <el-row type="flex" align="middle" justify="space-around">
         <el-col :span="span">
-          <data-form :fields="fields" v-model="form" @save="evalEdit" labelWidth="80px"></data-form>
+          <data-form :fields="fields" v-model="form" @save="evalEdit" labelWidth="80px" :back="toReturn">
+            <template #params="{ form }">
+              <el-row>
+                <el-col :span="24" style="text-align: right">
+                  <el-button type="primary" size="mini" @click="paramsAdd()">添加</el-button>
+                </el-col>
+                <el-col :span="24">
+                  <el-table :data="form.params" border stripe>
+                    <el-table-column label="key" align="center">
+                      <template v-slot="{ row }">
+                        <el-input v-model="row.key"></el-input>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="value" align="center">
+                      <template v-slot="{ row }">
+                        <el-input v-model="row.value"></el-input>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="备注" align="center">
+                      <template v-slot="{ row }">
+                        <el-input v-model="row.remark"></el-input>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="操作" align="center">
+                      <template v-slot="{ $index }">
+                        <el-button type="danger" size="mini" @click="paramsDelete($index)">删除</el-button>
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                </el-col>
+              </el-row>
+            </template>
+            <template #img.home>
+              <e-upload v-model="form.img.home" url="/files/st/site/upload" :limit="1"></e-upload>
+            </template>
+            <template #img.login>
+              <e-upload v-model="form.img.login" url="/files/st/login/upload" :limit="1"></e-upload>
+            </template>
+            <template #img.logo>
+              <e-upload v-model="form.img.logo" url="/files/st/logo/upload" :limit="1"></e-upload>
+            </template>
+          </data-form>
         </el-col>
       </el-row>
     </div>
@@ -32,6 +68,7 @@
 </template>
 
 <script>
+const _ = require('lodash');
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: tenant } = createNamespacedHelpers('tenant');
 export default {
@@ -47,6 +84,10 @@ export default {
         { label: '站点名称', model: 'name', filter: true },
         { label: '站点标识', model: '_tenant', filter: true },
         { label: '是否启用', model: 'is_use', format: (i) => (i ? '启用' : '禁用'), noForm: true },
+        { label: '参数', model: 'params', custom: true, notable: true },
+        { label: '主页图片', model: 'img.home', custom: true, notable: true },
+        { label: '登陆图片', model: 'img.login', custom: true, notable: true },
+        { label: 'logo', model: 'img.logo', custom: true, notable: true },
       ],
       opera: [
         {
@@ -71,7 +112,14 @@ export default {
           display: (i) => i.is_use && i._tenant !== 'master',
         },
       ],
-      form: {},
+      form: {
+        params: [],
+      },
+      img: {
+        home: [],
+        login: [],
+        logo: [],
+      },
     };
   },
   created() {
@@ -88,10 +136,21 @@ export default {
     },
     toAdd() {
       this.view = 'detail';
-      this.form = {};
+      this.formInit();
     },
     toEdit({ data }) {
       let dup = _.cloneDeep(data);
+      if (dup.img) {
+        const keys = Object.keys(this.img);
+        for (const key of keys) {
+          const value = _.get(dup.img, key);
+          console.log(value);
+          if (value) dup.img[key] = [{ url: value }];
+          else dup.img[key] = [];
+        }
+      } else {
+        dup.img = _.cloneDeep(this.img);
+      }
       this.$set(this, `form`, dup);
       this.view = 'detail';
     },
@@ -102,6 +161,8 @@ export default {
     },
     async evalEdit({ data }) {
       let dup = _.cloneDeep(data);
+      // 处理img
+      dup = this.dealImg(dup);
       let res;
       if (dup._id) res = await this.update(dup);
       else res = await this.create(dup);
@@ -110,6 +171,15 @@ export default {
         this.view = 'list';
       }
     },
+    dealImg(data) {
+      const keys = Object.keys(data.img);
+      for (const key of keys) {
+        if (key && _.get(data.img, key) && _.get(data.img, key).length === 1) {
+          data.img[key] = _.get(_.head(_.get(data.img, key)), `url`);
+        }
+      }
+      return data;
+    },
     async toDelete({ data }) {
       this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
         confirmButtonText: '确定',
@@ -125,6 +195,24 @@ export default {
         })
         .catch(() => {});
     },
+    toReturn() {
+      this.view = 'list';
+    },
+    formInit() {
+      const form = {
+        params: [],
+        img: this.img,
+      };
+      this.$set(this, `form`, form);
+    },
+    paramsAdd() {
+      if (!this.form.params) this.$set(this.form, `params`, []);
+      console.log(this.form.params);
+      this.form.params.push({});
+    },
+    paramsDelete(index) {
+      this.form.params.splice(index, 1);
+    },
   },
   computed: {
     ...mapState(['user', 'isMobile']),