tianheng-ui 0.1.12 → 0.1.15

package/packages/TableMaking/widgetConfig.vue

@@ -13,57 +13,82 @@
     </div>
     <div v-if="activeTab.value === 0" class="fields">
       <el-checkbox
-        :indeterminate="search.isIndeterminate"
-        v-model="search.isCheckAll"
-        @change="handleSearchCheckAllChange"
+        v-model="searchField.isCheckAll"
+        :indeterminate="searchField.isIndeterminate"
+        @change="val => handleCheckAllChange(val, 'searchField')"
         >全选</el-checkbox
       >
-      <el-checkbox-group v-model="search.fields" @change="handleChange">
-        <el-checkbox
-          v-for="(item, index) in fields"
-          :label="index"
-          :key="index"
-          >{{ item.label }}</el-checkbox
-        >
-      </el-checkbox-group>
+      <el-checkbox
+        v-for="item in fields"
+        :label="item.prop"
+        :key="`searchField-${item.prop}-${item.isSearch}`"
+        :checked="item.isSearch"
+        @change="val => handleCheckboxChange(val, 'searchField', item)"
+        >{{ item.label }}</el-checkbox
+      >
     </div>
     <div v-if="activeTab.value === 1" class="fields">
       <el-checkbox
-        :indeterminate="table.isIndeterminate"
-        v-model="table.isCheckAll"
-        @change="handleTableCheckAllChange"
+        v-model="tableField.isCheckAll"
+        :indeterminate="tableField.isIndeterminate"
+        @change="val => handleCheckAllChange(val, 'tableField')"
         >全选</el-checkbox
       >
-      <el-checkbox-group v-model="table.fields" @change="handleChange">
-        <el-checkbox
-          v-for="(item, index) in fields"
-          :label="index"
-          :key="index"
-          >{{ item.label }}</el-checkbox
-        >
-      </el-checkbox-group>
+      <el-checkbox
+        v-for="item in fields"
+        :label="item.prop"
+        :key="`tableField-${item.prop}-${item.isTable}`"
+        :checked="item.isTable"
+        @change="val => handleCheckboxChange(val, 'tableField', item)"
+        >{{ item.label }}</el-checkbox
+      >
     </div>
-    <div v-if="activeTab.value === 2" class="tableConfig">
+    <div v-if="activeTab.value === 2 && config.table" class="tableConfig">
       <el-form
-        :model="tableConfig"
+        :model="config"
         label-position="left"
         label-width="80px"
         size="mini"
+        :rules="formRules"
+        ref="formRef"
       >
         <el-collapse v-model="tableCollapse">
-          <el-collapse-item title="表格配置" name="1">
-            <el-form-item label="高级查询">
-              <el-switch v-model="tableConfig.search.show"> </el-switch>
+          <el-collapse-item title="表格配置" name="group-table">
+            <el-form-item label="列表接口" required prop="table.mounted.api">
+              <el-select
+                v-model="config.table.mounted.api"
+                style="width:100%"
+                value-key="id"
+                clearable
+                placeholder="请选择"
+                no-data-text="暂无接口，请前往【接口模块】创建"
+              >
+                <el-option
+                  v-for="item in apiOptions"
+                  :key="item.id"
+                  :label="item.label"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="开启查询">
+              <el-switch v-model="config.search.show"> </el-switch>
             </el-form-item>
+            <el-form-item label="列表序号">
+              <el-switch v-model="config.table.sequence"> </el-switch>
+            </el-form-item>
+          </el-collapse-item>
+          <el-collapse-item title="排序配置" name="group-sort">
             <el-form-item label="排序类型">
-              <el-radio-group v-model="tableConfig.table.sort.type">
+              <el-radio-group v-model="config.table.sort.type">
                 <el-radio-button label="1">降序</el-radio-button>
                 <el-radio-button label="2">升序</el-radio-button>
               </el-radio-group>
             </el-form-item>
             <el-form-item label="排序字段">
               <el-select
-                v-model="tableConfig.table.sort.key"
+                v-model="config.table.sort.key"
                 placeholder="请选择"
                 clearable
               >
@@ -76,19 +101,13 @@
                 </el-option>
               </el-select>
             </el-form-item>
-            <el-form-item label="序号">
-              <el-switch v-model="tableConfig.table.sequence"> </el-switch>
-            </el-form-item>
-            <el-form-item label="分页设置">
-              <el-switch v-model="tableConfig.table.pageInfo.show"> </el-switch>
+          </el-collapse-item>
+          <el-collapse-item title="分页配置" name="group-pageInfo">
+            <el-form-item label="开启分页">
+              <el-switch v-model="config.table.pageInfo.show"> </el-switch>
             </el-form-item>
-            <el-form-item
-              v-if="tableConfig.table.pageInfo.show"
-              label="分页条数"
-            >
-              <el-radio-group
-                v-model="tableConfig.table.pageInfo.options.pageSize"
-              >
+            <el-form-item v-if="config.table.pageInfo.show" label="分页条数">
+              <el-radio-group v-model="config.table.pageInfo.options.pageSize">
                 <el-radio-button :label="20">20条</el-radio-button>
                 <el-radio-button :label="50">50条</el-radio-button>
                 <el-radio-button :label="100">100条</el-radio-button>
@@ -96,112 +115,165 @@
               </el-radio-group>
             </el-form-item>
           </el-collapse-item>
-          <!-- <el-collapse-item title="子表配置" name="2">
-            <el-form-item label="子表样式">
-              <el-select v-model="tableConfig.sortField" placeholder="请选择">
-                <el-option
-                  v-for="item in []"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                >
-                </el-option>
-              </el-select>
+          <el-collapse-item title="提示语配置" name="group-hint">
+            <el-form-item label="空数据">
+              <el-input
+                v-model="config.table.empty.text"
+                placeholder="请输入"
+              ></el-input>
             </el-form-item>
+            <el-form-item label="加载提示">
+              <el-input
+                v-model="config.table.loading.text"
+                placeholder="请输入"
+              ></el-input>
+            </el-form-item>
+          </el-collapse-item>
+          <!-- <el-collapse-item title="数据接口配置" name="group-network">
           </el-collapse-item> -->
-          <el-collapse-item name="3">
+          <el-collapse-item name="group-button">
             <template slot="title">
               <div class="collapse-title">
                 <div>按钮配置</div>
                 <div
                   class="collapse-title-action"
-                  @click.stop="handleActionConfig"
+                  @click.stop="handleActionConfig()"
                 >
                   配置
                 </div>
               </div>
             </template>
-            <el-form-item label-width="90px">
-              <el-checkbox v-model="tableConfig.tools.add.show" slot="label"
-                >新增</el-checkbox
-              >
+            <div
+              v-for="(item, index) in Object.values(config.tools)"
+              :key="index"
+              class="tools-item"
+            >
+              <el-checkbox v-model="item.show">{{ item.name }}</el-checkbox>
               <el-input
-                v-model="tableConfig.tools.add.name"
+                v-model="item.text"
                 placeholder="请输入内容"
+                size="mini"
               ></el-input>
-            </el-form-item>
-            <el-form-item label-width="90px">
-              <el-checkbox v-model="tableConfig.tools.edit.show" slot="label"
-                >编辑</el-checkbox
+              <i class="el-icon-set-up" @click="handleActionConfig(item)"></i>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-form>
+    </div>
+
+    <th-dialog
+      v-model="dialog.show"
+      title="按钮配置"
+      :modal-append-to-body="false"
+      :showFooter="false"
+    >
+      <div class="toolsSeting th-flex_box">
+        <el-card class="th-flex_left" style="width:200px;margin-right:10px;">
+          <el-tree
+            :data="Object.values(config.tools || [])"
+            :props="{ label: 'name' }"
+            node-key="name"
+            @node-click="handleActionConfig"
+          ></el-tree>
+        </el-card>
+        <el-card v-if="dialog.data" class="th-fiex_right">
+          <el-form
+            ref="form"
+            :model="dialog.data"
+            label-width="80px"
+            size="mini"
+          >
+            <el-form-item label="按钮模型">
+              <el-button
+                :type="dialog.data.type"
+                :icon="dialog.data.icon"
+                :plain="dialog.data.plain"
+                :round="dialog.data.round"
+                >{{ dialog.data.text }}</el-button
               >
-              <el-input
-                v-model="tableConfig.tools.edit.name"
-                placeholder="请输入内容"
-              ></el-input>
             </el-form-item>
-            <el-form-item label-width="90px">
-              <el-checkbox v-model="tableConfig.tools.detail.show" slot="label"
-                >详情</el-checkbox
-              >
-              <el-input
-                v-model="tableConfig.tools.detail.name"
-                placeholder="请输入内容"
-              ></el-input>
+            <el-form-item label="按钮名称">
+              <el-input v-model="dialog.data.text"></el-input>
             </el-form-item>
-            <el-form-item label-width="90px">
-              <el-checkbox v-model="tableConfig.tools.delete.show" slot="label"
-                >删除</el-checkbox
-              >
-              <el-input
-                v-model="tableConfig.tools.delete.name"
-                placeholder="请输入内容"
-              ></el-input>
+            <el-form-item label="按钮类型">
+              <el-radio-group v-model="dialog.data.type">
+                <el-radio label="">默认</el-radio>
+                <el-radio label="primary">主要按钮</el-radio>
+                <el-radio label="success">成功按钮</el-radio>
+                <el-radio label="info">信息按钮</el-radio>
+                <el-radio label="warning">警告按钮</el-radio>
+                <el-radio label="danger">危险按钮</el-radio>
+              </el-radio-group>
             </el-form-item>
-            <el-form-item label-width="90px">
-              <el-checkbox
-                v-model="tableConfig.tools.batchDelete.show"
-                slot="label"
-                >批量删除</el-checkbox
-              >
-              <el-input
-                v-model="tableConfig.tools.batchDelete.name"
-                placeholder="请输入内容"
-              ></el-input>
+            <el-form-item label="按钮空心">
+              <el-switch v-model="dialog.data.plain"> </el-switch>
+            </el-form-item>
+            <el-form-item label="按钮圆角">
+              <el-switch v-model="dialog.data.round"> </el-switch>
             </el-form-item>
-            <el-form-item label-width="90px">
-              <el-checkbox v-model="tableConfig.tools.export.show" slot="label"
-                >导出</el-checkbox
+            <el-form-item label="按钮图标">
+              <th-icons v-model="dialog.data.icon"></th-icons>
+            </el-form-item>
+            <el-form-item label="关联表单">
+              <el-select
+                v-model="dialog.data.form"
+                style="width:100%"
+                clearable
+                placeholder="请关联表单"
+                no-data-text="暂无表单，请前往【表单模块】创建"
               >
-              <el-input
-                v-model="tableConfig.tools.export.name"
-                placeholder="请输入内容"
-              ></el-input>
+                <el-option
+                  v-for="item in formOptions"
+                  :key="item.id"
+                  :label="item.label"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
             </el-form-item>
-            <el-form-item label-width="90px">
-              <el-checkbox v-model="tableConfig.tools.import.show" slot="label"
-                >导入</el-checkbox
+            <el-form-item label="关联接口">
+              <el-select
+                v-model="dialog.data.api"
+                style="width:100%"
+                value-key="id"
+                clearable
+                placeholder="如关联表单中已配置接口，请勿重复关联"
+                no-data-text="暂无接口，请前往【接口模块】创建"
               >
-              <el-input
-                v-model="tableConfig.tools.import.name"
-                placeholder="请输入内容"
-              ></el-input>
+                <el-option
+                  v-for="item in apiOptions"
+                  :key="item.id"
+                  :label="item.label"
+                  :value="item"
+                >
+                </el-option>
+              </el-select>
             </el-form-item>
-          </el-collapse-item>
-        </el-collapse>
-      </el-form>
-    </div>
+          </el-form>
+        </el-card>
+      </div>
+    </th-dialog>
   </div>
 </template>
 
 <script>
+import { deepClone } from "../FormMaking/util";
 export default {
   props: {
+    config: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
     fields: {
       type: Array,
       default: () => {
         return [];
       }
-    }
+    },
+    formOptions: Array,
+    apiOptions: Array
   },
   data() {
     return {
@@ -211,101 +283,144 @@ export default {
         { title: "列表属性", value: 2 }
       ],
       activeTab: { title: "查询字段", value: 0 },
-      search: {
-        fields: [],
+      searchField: {
         isCheckAll: false,
         isIndeterminate: false
       },
-      table: {
-        fields: [],
+      tableField: {
         isCheckAll: false,
         isIndeterminate: false
       },
-      tableCollapse: ["1", "3"],
-      tableConfig: {
-        search: {
-          show: true,
-          options: []
-        },
-        table: {
-          options: [],
-          pageInfo: {
-            show: true,
-            options: {
-              pageCount: 0, // 总页数
-              pageSize: 20, // 每页展示的条数
-              currentPage: 1, // 当前页码
-              total: 0, // 总条数
-              sizes: [10, 20, 30, 50, 100]
-            }
-          },
-          sort: { type: "1", key: "" },
-          loading: { show: false, text: "加载中", image: "" },
-          empty: { show: true, text: "暂无数据", image: "" },
-          sequence: true //是否显示序号
-        },
-        tools: {
-          add: { show: true, name: "新增", position: 1 },
-          edit: { show: true, name: "编辑", position: 2 },
-          detail: { show: false, name: "查看", position: 2 },
-          delete: { show: true, name: "删除", position: 2 },
-          batchDelete: { show: false, name: "批量删除", position: 1 },
-          export: { show: false, name: "导出", position: 1 },
-          import: { show: false, name: "导入", position: 1 }
-        },
-        network: {}
-      }
+      tableCollapse: [
+        "group-table",
+        "group-pageInfo",
+        "group-sort",
+        "group-hint",
+        "group-network",
+        "group-button"
+      ],
+      formRules: {
+        "table.mounted.api": [
+          { required: true, message: "请选择列表接口", trigger: "change" }
+        ]
+      },
+      dialog: { show: false, data: null }
     };
   },
+  watch: {
+    config(val) {
+      this.handleFields();
+    },
+    fields(val) {
+      this.handleFields();
+    }
+  },
+  computed: {
+    searchActiveFields() {
+      const data = this.config.search.options.map(item => {
+        return item.prop;
+      });
+      return data;
+    },
+    tableActiveFields() {
+      const data = this.config.table.options.map(item => {
+        return item.prop;
+      });
+      return data;
+    }
+  },
   mounted() {},
   methods: {
+    handleFields() {
+      this.fields.forEach(item => {
+        item.isSearch = this.searchActiveFields.includes(item.prop);
+        item.isTable = this.tableActiveFields.includes(item.prop);
+      });
+      this.searchField = {
+        isCheckAll: this.searchActiveFields.length === this.fields.length,
+        isIndeterminate:
+          this.searchActiveFields.length !== 0 &&
+          this.searchActiveFields.length !== this.fields.length
+      };
+      this.tableField = {
+        isCheckAll: this.tableActiveFields.length === this.fields.length,
+        isIndeterminate:
+          this.tableActiveFields.length !== 0 &&
+          this.tableActiveFields.length !== this.fields.length
+      };
+    },
     handleTabsSelect(val) {
       this.activeTab = val;
     },
-    handleChange() {
-      if (this.activeTab.value === 0) {
-        const count = this.search.fields.length;
-        this.search.isCheckAll = count === this.fields.length;
-        this.search.isIndeterminate = count > 0 && count < this.fields.length;
-        this.$emit("fields-change", {
-          type: this.activeTab.value,
-          data: this.search.fields
+    handleCheckAllChange(bool, action) {
+      if (action === "searchField") {
+        this.fields.forEach(item => {
+          item.isSearch = bool;
         });
-      } else {
-        const count = this.table.fields.length;
-        this.table.isCheckAll = count === this.fields.length;
-        this.table.isIndeterminate = count > 0 && count < this.fields.length;
-        this.$emit("fields-change", {
-          type: this.activeTab.value,
-          data: this.table.fields
+        const data = deepClone(this.fields);
+        this.config.search.options = bool ? data : [];
+        this.searchField = { isCheckAll: bool, isIndeterminate: false };
+        return;
+      }
+      if (action === "tableField") {
+        this.fields.forEach(item => {
+          item.isTable = bool;
         });
+        const data = deepClone(this.fields);
+        this.config.table.options = bool ? data : [];
+        this.tableField = { isCheckAll: bool, isIndeterminate: false };
+        return;
       }
     },
-    handleSearchCheckAllChange(val) {
-      const list = [];
-      if (val) {
-        for (let i = 0; i < this.fields.length; i++) {
-          list.push(i);
-        }
+    handleCheckboxChange(bool, action, data) {
+      if (action === "searchField") {
+        data.isSearch = bool;
+        bool
+          ? this.config.search.options.push(deepClone(data))
+          : (this.config.search.options = this.config.search.options.filter(
+              item => {
+                return item.prop !== data.prop;
+              }
+            ));
+        this.searchField = {
+          isCheckAll: this.config.search.options.length === this.fields.length,
+          isIndeterminate:
+            this.config.search.options.length !== 0 &&
+            this.config.search.options.length !== this.fields.length
+        };
+        return;
       }
-      this.search.fields = list;
-      this.search.isIndeterminate = false;
-      this.handleChange();
-    },
-    handleTableCheckAllChange(val) {
-      const list = [];
-      if (val) {
-        for (let i = 0; i < this.fields.length; i++) {
-          list.push(i);
-        }
+      if (action === "tableField") {
+        data.isTable = bool;
+        bool
+          ? this.config.table.options.push(deepClone(data))
+          : (this.config.table.options = this.config.table.options.filter(
+              item => {
+                return item.prop !== data.prop;
+              }
+            ));
+        this.tableField = {
+          isCheckAll: this.config.table.options.length === this.fields.length,
+          isIndeterminate:
+            this.config.table.options.length !== 0 &&
+            this.config.table.options.length !== this.fields.length
+        };
+        return;
       }
-      this.table.fields = list;
-      this.table.isIndeterminate = false;
-      this.handleChange();
     },
-    handleActionConfig() {},
-    getJson() {
-      return JSON.parse(JSON.stringify(this.tableConfig));
+    handleActionConfig(data) {
+      this.dialog = { show: true, data };
+    },
+    handleFormValidate() {
+      return new Promise((resolve, reject) => {
+        if (this.$refs.formRef) {
+          this.$refs.formRef.validate(valid => {
+            resolve(valid);
+          });
+        } else {
+          reject();
+        }
+      });
     }
   }
 };
@@ -368,6 +483,21 @@ export default {
         color: #409eff;
       }
     }
+    .tools-item {
+      display: flex;
+      align-items: center;
+      padding: 7px 0;
+
+      .el-checkbox {
+        width: 140px;
+      }
+      > i {
+        height: 20px;
+        line-height: 20px;
+        padding-left: 10px;
+        cursor: pointer;
+      }
+    }
   }
 }
 </style>