improve: 代码生成调整

template/admin/src/pages/system/codeGeneration/components/Field.vue

@@ -1,190 +0,0 @@
-<template>
-  <div class="main">
-    <Alert type="warning" closable>列表展示的表格字段，默认有id和操作项；字段的选择由第一步自己添加的字段生成或者是由已存在的数据表自动读取出的字段；最多选择10列进行展示；可以为空不填写，生成后由开发者自行编写</Alert>
-    <div class="mb20">
-      <Button class="mr10" type="primary" @click="addRow">添加列</Button>
-    </div>
-    <!-- <Table border :columns="columns" :data="dataList">
-      <template slot-scope="{ row }" slot="action">
-        <a>删除</a>
-        <Divider type="vertical" />
-        <a>修改</a>
-      </template>
-    </Table> -->
-    <div class="fied-table">
-      <div class="fied-item" v-for="(item, index) in dataList" :key="index">
-        <div class="fied-parameter">
-          <Icon class="close" size="14" type="md-close-circle" @click="delItem(index)" />
-          <div class="name">
-            <Input class="from-width" v-model="item.name"></Input>
-          </div>
-          <div class="field">
-            <Select v-if="item.field !== 'id'" class="from-width" v-model="item.field" transfer>
-              <Option v-for="item in rowList" :value="item.value" :label="item.label" :key="item.value">{{
-                item.label
-              }}</Option>
-            </Select>
-            <span v-else>{{ item.field }}</span>
-          </div>
-        </div>
-      </div>
-      <div class="fied-item">
-        <div class="set-up">
-          <div class="name">操作</div>
-          <div class="field">编辑|删除</div>
-        </div>
-      </div>
-    </div>
-    <!-- <Modal v-model="modal" width="360" title="新增列">
-      <div>
-        <Select v-model="rowName" @on-change="changeRow" :label-in-value="true">
-          <Option v-for="item in rowList" :value="item.value" :label="item.label" :key="item.value">{{
-            item.label
-          }}</Option>
-        </Select>
-        <Input class="mt10" v-model="comment"></Input>
-      </div>
-      <template #footer>
-        <Button type="primary" size="large" long @click="add">添加</Button>
-      </template>
-    </Modal> -->
-  </div>
-</template>
-
-<script>
-export default {
-  name: '',
-  props: {
-    field: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    rowList: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-  },
-  data() {
-    return {
-      modal: false,
-      rowName: '',
-      columns: [
-        {
-          title: 'id',
-          key: 'id',
-          align: 'center',
-          width: 110,
-        },
-      ],
-      dataList: [
-        {
-          name: 'id',
-          field: 'id',
-        },
-      ],
-      comment: '',
-      rowData: {},
-    };
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    addRow() {
-      if (this.dataList.length >= 10) return this.$Message.warning('最多添加10个');
-      let i = this.dataList.length;
-      // this.modal = true;
-      this.dataList.splice(i, 0, {
-        name: '',
-        field: '',
-      });
-    },
-    changeRow(e) {
-      this.rowData = e;
-      this.rowList.map((i) => {
-        if (i.value === e.value) this.rowData.comment = i.comment;
-      });
-    },
-    // add() {
-    //   let i = this.dataList.length - 1;
-    //   console.log(i);
-    //   this.$nextTick((e) => {
-    //     this.dataList.splice(i, 0, {
-    //       name: this.rowData.label,
-    //       field: this.rowData.value,
-    //     });
-    //     this.comment = '';
-    //   });
-    // },
-    delItem(i) {
-      this.dataList.splice(i, 1);
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.ivu-table-wrapper {
-  border-top: 1px solid #dcdee2;
-  border-left: 1px solid #dcdee2;
-}
-.form-width {
-  width: 500px;
-}
-.fied-table {
-  display: flex;
-  border: 1px solid #dcdee2;
-  width: max-content;
-  .set-up {
-    width: 80px;
-    .name {
-      line-height: 32px;
-    }
-  }
-}
-.fied-parameter {
-  position: relative;
-  .close {
-    position: absolute;
-    top: -6px;
-    right: -6px;
-    z-index: 11;
-  }
-}
-
-.fied-parameter,
-.set-up {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: center;
-  // border-radius: 6px;
-  font-size: 14px;
-  border: 1px solid #dcdee2;
-  height: 108px;
-  .name {
-    width: 100%;
-    height: 52px;
-    text-align: center;
-    padding: 10px 10px;
-    background-color: #f8f8f9;
-    /deep/ .ivu-input{
-      text-align: center;
-    }
-  }
-  .field {
-    width: 100%;
-    line-height: 31px;
-    height: 54px;
-
-    text-align: center;
-    border-top: 2px solid #dcdee2;
-    padding: 10px 10px;
-  }
-  .from-width {
-    width: 90px;
-  }
-}
-</style>

template/admin/src/pages/system/codeGeneration/components/FormItem.vue

@@ -1,121 +0,0 @@
-<template>
-  <div class="main">
-    <Alert type="warning" closable>表单项添加的内容将会展示在生成页面后自动生成的表单里面；
-      编辑和新增都会调用此表单；生成后会新增对应的表单规则代码；可以为空不填写，生成后由开发者自行编写</Alert>
-    <div class="mb20">
-      <Button class="mr10" type="primary" @click="addRow">添加表单项</Button>
-    </div>
-    <div>
-      <div class="item" v-for="(item, index) in dataList" :key="index">
-        <div class="row">
-          <Select v-model="item.name" transfer>
-            <Option v-for="item in rowList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-          </Select>
-        </div>
-        <div class="row">
-          <Input v-model="item.field" class="priceBox"></Input>
-        </div>
-        <div class="row">
-          <Select v-model="item.type" transfer>
-            <Option v-for="item in reqMetList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-          </Select>
-        </div>
-        <div class="row">
-          <Select v-model="item.required" transfer>
-            <Option v-for="item in requiredList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-          </Select>
-        </div>
-        <div class="row" v-if="item.type == 2">
-          <Input v-model="item.textarea" class="priceBox"></Input>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: '',
-  props: {
-    formItem: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    rowList: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-  },
-  data() {
-    return {
-      requiredList: [
-        {
-          value: 0,
-          label: '否',
-        },
-        {
-          value: 1,
-          label: '是',
-        },
-      ],
-      reqMetList: [
-        {
-          value: 0,
-          label: 'input',
-        },
-        {
-          value: 1,
-          label: 'textarea',
-        },
-        {
-          value: 2,
-          label: 'select',
-        },
-        {
-          value: 3,
-          label: 'radio',
-        },
-        {
-          value: 4,
-          label: 'number',
-        },
-      ],
-      dataList: [],
-    };
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    addRow() {
-      this.dataList.push({
-        name: '',
-        type: '',
-        field: '',
-        required: 0,
-        textarea: '',
-      });
-    },
-  },
-};
-</script>
-<style lang="stylus" scoped>
-.ivu-table-wrapper {
-  border-top: 1px solid #dcdee2;;
-  border-left: 1px solid #dcdee2;;
-}
-.form-width {
-  width: 500px;
-}
-.item{
-  display flex
-  margin-bottom 10px
-  .row{
-    width 140px
-    margin-right 10px
-  }
-}
-</style>

template/admin/src/pages/system/codeGeneration/components/FoundationFor.vue

@@ -19,57 +19,116 @@
       </FormItem>
       <FormItem label="菜单名称">
         <Input class="form-width" v-model="foundation.menuName" placeholder="请输入表名"></Input>
-        <div class="tip">生成菜单为可选项，不填写默认生成的菜单名称将为表名；生成后会把自动生成的权限默认加入该菜单下</div>
+        <div class="tip">
+          生成菜单为可选项，不填写默认生成的菜单名称将为表名；生成后会把自动生成的权限默认加入该菜单下
+        </div>
       </FormItem>
       <FormItem label="表名">
         <Input class="form-width" v-model="foundation.tableName" placeholder="请输入表名"></Input>
-        <div class="tip">用于生成CRUD指定的表名，不需要携带表前缀；对于生成过的表将不能在进行生成；或者可以删除对应的文件重新生成！对应系统中重要的数据表将不允许生成！</div>
+        <div class="tip">
+          用于生成CRUD指定的表名，不需要携带表前缀；对于生成过的表将不能在进行生成；或者可以删除对应的文件重新生成！对应系统中重要的数据表将不允许生成！
+        </div>
       </FormItem>
       <FormItem label="是否存在">
-        <RadioGroup v-model="foundation.isTable">
+        <RadioGroup v-model="foundation.isTable" @on-change="changeRadio">
           <Radio :label="1">是</Radio>
           <Radio :label="0">否</Radio>
         </RadioGroup>
-        <div class="tip">数据库表可以生成系统存在的，也可以选择【否】后手动生成，不过此生成方式不交单一；如果不满足使用需求可以先在数据库中创建表，然后选择【是】再进行操作</div>
+        <div class="tip">
+          数据库表可以生成系统存在的，也可以选择【否】后手动生成，不过此生成方式不交单一；如果不满足使用需求可以先在数据库中创建表，然后选择【是】再进行操作
+        </div>
       </FormItem>
-      <FormItem label="表SQL" v-if="!foundation.isTable">
+      <FormItem label="表SQL">
+        <Button type="primary" @click="addRow">{{ foundation.isTable ? '生成表sql' : '添加一行' }}</Button>
+
         <div>
-          <div class="item" v-for="(item, index) in dataList" :key="index">
-            <div class="row">
-              <Select v-model="item.type" transfer>
+          <Table
+            ref="selection"
+            :columns="columns"
+            :data="tableField"
+            no-data-text="暂无数据"
+            highlight-row
+            :loading="loading"
+            max-height="600"
+            size="small"
+            no-filtered-data-text="暂无筛选结果"
+          >
+            <template slot-scope="{ row, index }" slot="field">
+              <span v-if="foundation.isTable">{{ row.field }}</span>
+              <Input
+                v-else
+                :disabled="['addTimestamps', 'addSoftDelete'].includes(tableField[index].file_type)"
+                v-model="tableField[index].field"
+              ></Input>
+            </template>
+            <template slot-scope="{ row, index }" slot="file_type">
+              <span v-if="foundation.isTable">{{ row.file_type }}</span>
+              <Select v-else v-model="tableField[index].file_type" @on-change="changeItemField($event, index)">
                 <Option v-for="item in columnTypeList" :value="item" :key="item">{{ item }}</Option>
               </Select>
-              <div class="tip">字段类型</div>
-            </div>
-            <div class="row">
-              <Input v-model="item.field" class="priceBox" placeholder="字段名称(英文或_)"></Input>
-              <div class="tip">字段名称为英文加下划线</div>
-            </div>
-            <div class="row">
-              <Input v-model="item.limit" type="number" class="priceBox" placeholder="长度"></Input>
-              <div class="tip">字段长度</div>
-            </div>
-            <div class="row">
-              <Select v-model="item.index" transfer placeholder="是否为索引">
-                <Option :value="0">否</Option>
-                <Option :value="1">是</Option>
+            </template>
+            <template slot-scope="{ row, index }" slot="limit">
+              <span v-if="foundation.isTable">{{ row.limit }}</span>
+              <Input
+                v-else
+                v-model="tableField[index].limit"
+                :disabled="['addTimestamps', 'addSoftDelete'].includes(tableField[index].file_type)"
+              ></Input>
+            </template>
+            <template slot-scope="{ row, index }" slot="default">
+              <span v-if="foundation.isTable">{{ row.default }}</span>
+              <Input
+                v-else
+                v-model="tableField[index].default"
+                :disabled="['addTimestamps', 'addSoftDelete'].includes(tableField[index].file_type)"
+              ></Input>
+            </template>
+            <template slot-scope="{ row, index }" slot="comment">
+              <span v-if="foundation.isTable">{{ row.comment }}</span>
+              <Input
+                v-else
+                v-model="tableField[index].comment"
+                :disabled="['addTimestamps', 'addSoftDelete'].includes(tableField[index].file_type)"
+              ></Input>
+            </template>
+            <template slot-scope="{ row, index }" slot="required">
+              <Checkbox
+                v-model="tableField[index].required"
+                :disabled="['addTimestamps', 'addSoftDelete'].includes(tableField[index].file_type)"
+              ></Checkbox>
+            </template>
+            <template slot-scope="{ row, index }" slot="is_table">
+              <Checkbox
+                v-model="tableField[index].is_table"
+                :disabled="['addTimestamps', 'addSoftDelete'].includes(tableField[index].file_type)"
+              ></Checkbox>
+            </template>
+            <template slot-scope="{ row, index }" slot="table_name">
+              <Input
+                v-model="tableField[index].table_name"
+                :disabled="['addTimestamps', 'addSoftDelete'].includes(tableField[index].file_type)"
+              ></Input>
+            </template>
+            <template slot-scope="{ row, index }" slot="from_type">
+              <Select
+                v-model="tableField[index].from_type"
+                :disabled="['addTimestamps', 'addSoftDelete'].includes(tableField[index].file_type)"
+              >
+                <Option v-for="item in fromTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
               </Select>
-              <div class="tip">是否为索引</div>
-            </div>
-            <div class="row">
-              <Input v-model="item.comment" class="priceBox" placeholder="备注"></Input>
-              <div class="tip">字段备注</div>
-            </div>
-          </div>
+            </template>
+            <template slot-scope="{ row, index }" slot="action">
+              <a @click="del(row, index)">删除</a>
+            </template>
+          </Table>
         </div>
-        <Button class="mr10" type="primary" @click="addRow">添加字段</Button>
       </FormItem>
     </Form>
   </div>
 </template>
 
 <script>
-import { crudMenus, crudColumnType } from '@/api/systemCodeGeneration';
+import { crudMenus, crudColumnType, crudFilePath } from '@/api/systemCodeGeneration';
 
 export default {
   name: '',
@@ -80,17 +139,89 @@ export default {
         return {};
       },
     },
-    dataList: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
   },
   data() {
     return {
       menusList: [],
       columnTypeList: [],
+      columns: [
+        {
+          title: '字段名称',
+          slot: 'field',
+          minWidth: 200,
+        },
+        {
+          title: '字段类型',
+          slot: 'file_type',
+          minWidth: 100,
+        },
+        {
+          title: '长度',
+          slot: 'limit',
+          minWidth: 100,
+        },
+        {
+          title: '默认值',
+          slot: 'default',
+          minWidth: 100,
+        },
+        {
+          title: '字段描述',
+          slot: 'comment',
+          minWidth: 100,
+        },
+        {
+          title: '必填',
+          slot: 'required',
+          width: 70,
+          align: 'center',
+        },
+        {
+          title: '列表',
+          slot: 'is_table',
+          width: 70,
+          align: 'center',
+        },
+        {
+          title: '列表名',
+          slot: 'table_name',
+          width: 100,
+          align: 'center',
+        },
+        {
+          title: '表单类型',
+          slot: 'from_type',
+          minWidth: 150,
+        },
+      ],
+      fromTypeList: [
+        {
+          value: '0',
+          label: '不生成',
+        },
+        {
+          value: 'input',
+          label: 'input',
+        },
+        {
+          value: 'textarea',
+          label: 'textarea',
+        },
+        {
+          value: 'select',
+          label: 'select',
+        },
+        {
+          value: 'radio',
+          label: 'radio',
+        },
+        {
+          value: 'number',
+          label: 'number',
+        },
+      ],
+      loading: false,
+      tableField: [],
     };
   },
   created() {
@@ -98,6 +229,79 @@ export default {
   },
   mounted() {},
   methods: {
+    changeItemField(e, i) {
+      console.log(e, i);
+      if (e === 'addSoftDelete') {
+        this.$set(this.tableField[i], 'comment', '添加和修改时间');
+      }
+      if (e === 'addTimestamps') {
+        this.$set(this.tableField[i], 'comment', '伪删除');
+      }
+    },
+    changeRadio(status) {
+      this.tableField = [];
+      if (status) {
+        this.addRow();
+      }
+    },
+    addRow() {
+      if (!this.foundation.tableName) return this.$Message.warning('请先填写表名');
+      if (!this.tableField.length) {
+        let data = {
+          menuName: this.foundation.menuName,
+          tableName: this.foundation.tableName,
+          isTable: this.foundation.isTable,
+          fromField: [],
+          columnField: [],
+        };
+        this.loading = true;
+        crudFilePath(data)
+          .then((res) => {
+            this.tableField = res.data.tableField.length ? res.data.tableField : [];
+            this.$emit('storageData', res.data.makePath);
+            this.loading = false;
+            this.tableField.push({
+              field: '',
+              file_type: '',
+              default: '',
+              comment: '',
+              required: false,
+              is_table: true,
+              table_name: '',
+              limit: '',
+              from_type: '0',
+            });
+          })
+          .catch((err) => {
+            this.$Message.warning(err.msg);
+            this.loading = false;
+          });
+      }
+      if (this.foundation.isTable) {
+      } else {
+        console.log(this.tableField);
+        for (let i = 0; i < this.tableField.length; i++) {
+          const el = this.tableField[i];
+          if (!el.field || !el.file_type || !el.default || !el.comment) {
+            return this.$Message.warning('请先完善上一条数据');
+          }
+          if (el.is_table && !el.table_name) {
+            return this.$Message.warning('请输入列表名');
+          }
+        }
+        this.tableField.push({
+          field: '',
+          file_type: '',
+          default: '',
+          comment: '',
+          required: false,
+          is_table: true,
+          table_name: '',
+          limit: '',
+          from_type: '0',
+        });
+      }
+    },
     getCrudMenus() {
       crudMenus().then((res) => {
         console.log(res);
@@ -107,9 +311,6 @@ export default {
         this.columnTypeList = res.data.types;
       });
     },
-    addRow() {
-      this.$emit('addRow');
-    },
   },
 };
 </script>

template/admin/src/pages/system/codeGeneration/index.vue

@@ -16,9 +16,14 @@
         </Steps>
       </Card>
     </div>
-    <div class="pt10" v-show="currentTab == '0'">
+    <div class="pt10  tab-1" v-show="currentTab == '0'">
       <Card :bordered="false" dis-hover class="ivu-mt">
-        <FoundationForm :foundation="formItem.foundation" :dataList="dataList" @addRow="addRow" />
+        <FoundationForm
+          ref="Foundation"
+          :foundation="formItem.foundation"
+          :tableField="tableField"
+          @storageData="storageData"
+        />
       </Card>
     </div>
     <div class="pt10" v-show="currentTab == '1'">
@@ -26,18 +31,8 @@
         <StorageLoc :storage="formItem.storage" />
       </Card>
     </div>
-    <div class="pt10" v-show="currentTab == '2'">
-      <Card :bordered="false" dis-hover class="ivu-mt">
-        <Field ref="Field" :field="formItem.field" :rowList="rowList" />
-      </Card>
-    </div>
-    <div class="pt10" v-show="currentTab == '3'">
-      <Card :bordered="false" dis-hover class="ivu-mt">
-        <FormItem ref="FormItem" :formItem="formItem.formItem" :rowList="rowList" />
-      </Card>
-    </div>
-    <Card :bordered="false" dis-hover class="mt10 btn">
-      <Button class="mr20"  @click="beforeTab">上一步</Button>
+    <Card :bordered="false" dis-hover class="btn">
+      <Button class="mr20" @click="beforeTab">上一步</Button>
       <Button type="primary" @click="nextTab">{{ currentTab == 3 ? '提交' : '下一步' }}</Button>
     </Card>
   </div>
@@ -47,20 +42,15 @@
 import { codeCrud } from '@/api/setting';
 import StorageLoc from './components/StorageLoc.vue';
 import FoundationForm from './components/FoundationFor.vue';
-import Field from './components/Field.vue';
-import FormItem from './components/FormItem.vue';
-import { crudFilePath } from '@/api/systemCodeGeneration';
 export default {
   name: 'system_code_generation',
-  components: { FoundationForm, StorageLoc, Field, FormItem },
+  components: { FoundationForm, StorageLoc },
   data() {
     return {
       currentTab: 0,
       headerList: [
         { label: '基础信息', value: 'foundation' },
         { label: '存放位置', value: 'storage' },
-        { label: '表格字段', value: 'field' },
-        { label: '表单项', value: 'formItem' },
       ],
       formItem: {
         foundation: {
@@ -76,29 +66,15 @@ export default {
       ruleValidate: {
         foundation: {},
       },
-      dataList: [
-        {
-          type: '',
-          limit: 0,
-          comment: '',
-          field: '',
-          index: 0,
-        },
-      ],
+      tableField: [],
       rowList: [],
     };
   },
   created() {},
   mounted: function () {},
   methods: {
-    addRow() {
-      this.dataList.push({
-        type: '',
-        limit: 0,
-        default: '',
-        field: '',
-        index: 0,
-      });
+    storageData(data) {
+      this.formItem.storage = data;
     },
     beforeTab() {
       this.currentTab--;
@@ -109,65 +85,28 @@ export default {
           return this.$Message.warning('请输入表名');
         }
         if (!this.formItem.foundation.isTable) {
-          for (let i = 0; i < this.dataList.length; i++) {
-            const e = this.dataList[i];
-            if (!e.type || !e.field || !e.comment) {
-              return this.$Message.warning('请完善sql数据');
-            }
-          }
-        }
-        let data = {
-          menuName: this.formItem.foundation.menuName,
-          tableName: this.formItem.foundation.tableName,
-          isTable: this.formItem.foundation.isTable,
-          fromField: [],
-          columnField: [],
-        };
-        crudFilePath(data)
-          .then((res) => {
-            console.log(res);
-            this.formItem.storage = res.data.makePath;
-            if (!this.formItem.foundation.isTable) {
-              this.rowList = [];
-              this.dataList.map((e) => {
-                this.rowList.push({
-                  label: e.field,
-                  value: e.field,
-                });
-              });
-            } else {
-              this.rowList = res.data.tableField;
+          if (!this.$refs.Foundation.tableField.length) return this.$Message.warning('请先添加表数据');
+          if (this.$refs.Foundation.tableField.length)
+            for (let i = 0; i < this.$refs.Foundation.tableField.length; i++) {
+              const el = this.$refs.Foundation.tableField[i];
+              if (!el.field || !el.file_type || !el.default || !el.comment) {
+                return this.$Message.warning('请完善sql表数据');
+              }
             }
-            this.currentTab++;
-          })
-          .catch((err) => {
-            this.$Message.error(err.msg);
-          });
-      } else if (this.currentTab == 2) {
-        for (let i = 0; i < this.$refs.Field.dataList.length; i++) {
-          const e = this.$refs.Field.dataList[i];
-          if (!e.name || !e.field) {
-            return this.$Message.warning('请完善表数据');
-          }
+        } else {
+          if (!this.$refs.Foundation.tableField.length) return this.$Message.warning('请先生成表数据');
         }
         this.currentTab++;
-      } else if (this.currentTab == 3) {
+      } else if (this.currentTab == 1) {
         try {
-          for (let i = 0; i < this.$refs.FormItem.dataList.length; i++) {
-            const e = this.$refs.FormItem.dataList[i];
-            if (!e.name || !e.type || !e.field || !e.required) {
-              return this.$Message.warning('请完善数据');
-            }
-          }
           let FieldList = this.$refs.Field.dataList;
           let data = {
             ...this.formItem.foundation,
             filePath: this.formItem.storage,
-            tableField: this.dataList,
-            columnField: this.$refs.Field.dataList,
-            fromField: this.$refs.FormItem.dataList,
+            tableField: this.$refs.Foundation.tableField,
+            // columnField: this.$refs.Field.dataList,
+            // fromField: this.$refs.FormItem.dataList,
           };
-          console.log(data);
           codeCrud(data)
             .then((res) => {
               this.$Message.success(res.msg);
@@ -193,9 +132,15 @@ export default {
   line-height: 26px;
 }
 .btn {
+  position: fixed;
+  bottom: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
+  width: 85%;
+}
+.tab-1 {
+  padding-bottom: 100px;
 }
 /deep/ .el-input__inner {
   padding-left: 7px;

template/admin/src/pages/system/configTab/list.vue

@@ -77,7 +77,7 @@
       v-model="modals2"
       scrollable
       footer-hide
-      closable
+      :closable="true"
       title="添加配置字段"
       :mask-closable="false"
       :z-index="1"