Merge branch 'master' of http://49.233.37.222:3000/wjm/mec-cloud_IntelligentManufacturing_CRM

ruoyi-ui/src/views/tableMange/components/StyleFormPanel.vue

@@ -10,7 +10,7 @@
       添加样式
     </el-button>
     <!-- 样式表格 -->
-    <el-table :data="[]" style="width: 100%">
+    <el-table :data="styleTableData" style="width: 100%">
       <el-table-column label="序号" type="index" width="50"> </el-table-column>
       <el-table-column prop="styleName" label="样式名" width="100">
       </el-table-column>
@@ -28,7 +28,7 @@
                   size="mini"
                   type="text"
                   icon="el-icon-edit"
-                  @click="() => {}"
+                  @click="editHandler(scope.row, scope.$index)"
                   >修改
                 </el-button>
               </el-dropdown-item>
@@ -37,7 +37,7 @@
                   size="mini"
                   type="text"
                   icon="el-icon-delete"
-                  @click="() => {}"
+                  @click="delHandler(scope.$index)"
                   >删除
                 </el-button>
               </el-dropdown-item>
@@ -66,10 +66,11 @@
           <el-radio-group v-model="styleFormData.styleType" size="small">
             <el-radio-button :label="0">行样式</el-radio-button>
             <el-radio-button :label="1">字段样式</el-radio-button>
+            <el-radio-button :label="2">字典样式</el-radio-button>
           </el-radio-group>
         </el-form-item>
         <template v-if="styleFormData.styleType == 0">
-          <el-form-item label="字体颜色">
+          <el-form-item label="背景颜色">
             <input
               type="color"
               :value="styleFormData.rowBgColor"
@@ -77,7 +78,51 @@
             />
           </el-form-item>
         </template>
-        <template v-else>
+        <template v-else-if="styleFormData.styleType == 1">
+          <el-form-item label="样式生效字段">
+            <el-col :span="10">
+              <el-select
+                v-model="styleFormData.styleTable"
+                value-key=""
+                placeholder="请选择表"
+                clearable
+                filterable
+              >
+                <el-option
+                  v-for="item in tableList"
+                  :key="item.tableName"
+                  :label="item.tableComment"
+                  :value="item.tableName"
+                >
+                  <span style="float: left">{{ item.tableComment }}</span>
+                  <span style="float: right; color: #8492a6; font-size: 13px">{{
+                    item.tableName
+                  }}</span>
+                </el-option>
+              </el-select>
+            </el-col>
+            <el-col :span="10">
+              <el-select
+                v-model="styleFormData.styleField"
+                value-key=""
+                placeholder="请选择字段"
+                clearable
+                filterable
+              >
+                <el-option
+                  v-for="item in styleFieldList"
+                  :key="item.fieldName"
+                  :label="item.fieldDescription"
+                  :value="item.fieldName"
+                >
+                  <span style="float: left">{{ item.fieldDescription }}</span>
+                  <span style="float: right; color: #8492a6; font-size: 13px">{{
+                    item.fieldName
+                  }}</span>
+                </el-option>
+              </el-select>
+            </el-col>
+          </el-form-item>
           <el-form-item label="文本样式">
             <el-radio-group v-model="styleFormData.fieldStyleType" size="small">
               <el-radio-button :label="0">普通文本</el-radio-button>
@@ -128,20 +173,90 @@
             </el-form-item>
           </template>
         </template>
-        <div class="condition-table-wrap">
+        <template v-else>
+          <el-form-item label="字典生效字段" size="normal">
+            <el-col :span="10">
+              <el-select
+                v-model="styleFormData.styleTable"
+                value-key=""
+                placeholder="请选择表"
+                clearable
+                filterable
+              >
+                <el-option
+                  v-for="item in tableList"
+                  :key="item.tableName"
+                  :label="item.tableComment"
+                  :value="item.tableName"
+                >
+                  <span style="float: left">{{ item.tableComment }}</span>
+                  <span style="float: right; color: #8492a6; font-size: 13px">{{
+                    item.tableName
+                  }}</span>
+                </el-option>
+              </el-select>
+            </el-col>
+            <el-col :span="10">
+              <el-select
+                v-model="styleFormData.styleField"
+                value-key=""
+                placeholder="请选择字段"
+                clearable
+                filterable
+              >
+                <el-option
+                  v-for="item in styleFieldList"
+                  :key="item.fieldName"
+                  :label="item.fieldDescription"
+                  :value="item.fieldName"
+                >
+                  <span style="float: left">{{ item.fieldDescription }}</span>
+                  <span style="float: right; color: #8492a6; font-size: 13px">{{
+                    item.fieldName
+                  }}</span>
+                </el-option>
+              </el-select>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="字典" size="normal">
+            <el-select
+              v-model="styleFormData.styleCondtion"
+              placeholder="请选择字典"
+              filterable
+            >
+              <el-option
+                v-for="item in dictsList"
+                :key="item.dictType"
+                :label="item.dictName"
+                :value="item.dictType"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </template>
+        <div v-if="styleFormData.styleType != 2" class="condition-table-wrap">
           <span class="table-title">条件编辑</span>
           <el-table :data="conditionTableData" style="width: 100%">
             <el-table-column label="序号" type="index" width="50">
             </el-table-column>
-            <el-table-column prop="tableKey" label="表名" width="150">
+            <el-table-column prop="tableName" label="表名" width="150">
               <template slot-scope="scope">
-                <el-select v-model="scope.row.tableKey" placeholder="请选择">
+                <el-select
+                  v-model="scope.row.tableName"
+                  @change="conditionTableChange(scope.row)"
+                  placeholder="请选择"
+                >
                   <el-option
-                    v-for="item in []"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
+                    v-for="item in tableList"
+                    :key="item.tableName"
+                    :label="item.tableComment"
+                    :value="item.tableName"
                   >
+                    <span style="float: left">{{ item.tableComment }}</span>
+                    <span
+                      style="float: right; color: #8492a6; font-size: 13px"
+                      >{{ item.tableName }}</span
+                    >
                   </el-option>
                 </el-select>
               </template>
@@ -150,11 +265,16 @@
               <template slot-scope="scope">
                 <el-select v-model="scope.row.fieldName" placeholder="请选择">
                   <el-option
-                    v-for="item in []"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
+                    v-for="item in scope.row.fieldList"
+                    :key="item.fieldName"
+                    :label="item.fieldDescription"
+                    :value="item.fieldName"
                   >
+                    <span style="float: left">{{ item.fieldDescription }}</span>
+                    <span
+                      style="float: right; color: #8492a6; font-size: 13px"
+                      >{{ item.fieldName }}</span
+                    >
                   </el-option>
                 </el-select>
               </template>
@@ -191,7 +311,7 @@
                   size="mini"
                   type="danger"
                   icon="el-icon-delete"
-                  @click="() => {}"
+                  @click="deleteConditionItem(scope.$index)"
                   >删除
                 </el-button>
               </template>
@@ -203,32 +323,54 @@
             icon="el-icon-plus"
             size="mini"
             style="width: 100%"
-            @click="addDataDialog"
+            @click="addConditionHandler"
           >
             添加条件
           </el-button>
         </div>
       </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogShow = false">取 消</el-button>
+        <el-button type="primary" @click="saveStyleFormHandler"
+          >确 定</el-button
+        >
+      </span>
     </el-dialog>
   </div>
 </template>
 
 <script>
+import { listType } from "@/api/system/tenant/type";
 export default {
   name: "StyleFormPanel",
-  props: [],
+  props: {
+    tableFieldList: {
+      default: [],
+      type: Array,
+    },
+    dragTableStyleList: {
+      default: [],
+      type: Array,
+    },
+  },
   components: {},
   data() {
     return {
       dialogShow: false,
-
+      // 表格及字段数据
+      tableList: [],
+      isShowFieldList: [],
+      allFieldList: [],
+      editIndex: -1,
       // 表格样式数据
       styleTableData: [],
       styleFormData: {
         styleName: "",
         styleDescription: "",
-        styleType: 0, //0:行样式  1:字段样式
-        tableKey: "",
+        styleType: 0, //0:行样式  1:字段样式 2:字典样式
+        styleTable: "", //样式生效的表
+        styleField: "", //样式生效的字段
+        tableName: "",
         styleCode: "",
         styleCondtion: "",
         rowBgColor: "", //行背景色
@@ -236,20 +378,16 @@ export default {
         fontColor: "", //字体颜色
         isTagFullBg: false, //tag背景色是否填满
         tagType: "",
-
-        // styleCondtionObj: {
-        //   styleField: "", //样式生效字段
-        //   styleCondtionField: "", //样式条件依赖字段
-        //   styleCondtionList: [], //条件列表
-        // },
+        conditionTableStr: "",
       },
       conditionTableData: [
-        {
-          tableKey: "",
-          fieldName: "",
-          condition: 1, //1:> 2:< 3:= 4:>= 5:<=
-          flagValue: 0,
-        },
+        // {
+        //   tableName: "",
+        //   fieldName: "",
+        //   condition: 1, //1:> 2:< 3:= 4:>= 5:<=
+        //   flagValue: 0,
+        //   fieldList: [],
+        // },
       ],
       conditionList: [
         {
@@ -295,20 +433,203 @@ export default {
           label: "危险",
         },
       ],
+      // 字典列表
+      dictsList: [],
     };
   },
-  computed: {},
+  computed: {
+    styleFieldList() {
+      return this.isShowFieldList.filter(
+        (item) => item.tableName == this.styleFormData.styleTable
+      );
+    },
+  },
+  watch: {
+    tableFieldList: {
+      handler(nval) {
+        if (!nval || !nval.length) return;
+        this.allFieldList = nval;
+        this.isShowFieldList = nval.filter((item) => item.isShow);
+        let tempList = nval.map((item) => {
+          return {
+            tableName: item.tableName,
+            tableComment: item.tableComment,
+          };
+        });
+        this.tableList = [];
+        tempList.forEach((item) => {
+          let isHas = this.tableList.find(
+            (it) => it.tableName == item.tableName
+          );
+          if (!isHas) {
+            this.tableList.push(item);
+          }
+        });
+      },
+      immediate: true,
+      deep: true,
+    },
+    dragTableStyleList: {
+      handler(nval) {
+        let res = nval.map((item) => {
+          let tampItem = JSON.parse(JSON.stringify(item));
+          let styleCode = JSON.parse(tampItem.styleCode);
+          let { rowBgColor, fieldStyleType, fontColor, isTagFullBg, tagType } =
+            styleCode;
+          let fieldData = tampItem.styleField?.split(".");
+          Object.assign(tampItem, {
+            rowBgColor,
+            fieldStyleType,
+            fontColor,
+            isTagFullBg,
+            tagType,
+            conditionTableStr: tampItem.styleCondtion,
+            styleTable: fieldData ? fieldData[0] : "",
+            styleField: fieldData ? fieldData[1] : "",
+          });
+          return tampItem;
+        });
+        this.styleTableData = res;
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
   methods: {
     // 添加一条样式数据回调
-    addDataDialog() {
+    addDataDialog(index, row) {
+      this.resetStyleFormData();
       this.dialogShow = true;
     },
 
+    // 重置样式表单
+    resetStyleFormData() {
+      Object.assign(this.styleFormData, {
+        styleName: "",
+        styleDescription: "",
+        styleType: 0,
+        tableName: "",
+        styleCode: "",
+        styleCondtion: "",
+        rowBgColor: "",
+        fieldStyleType: 0,
+        fontColor: "",
+        isTagFullBg: false,
+        tagType: "",
+        styleTable: "",
+        styleField: "",
+      });
+      this.conditionTableData = [];
+    },
+
+    //样式表单保存回调
+    saveStyleFormHandler() {
+      this.$refs.styleFormDataRef.validate((valid) => {
+        if (valid) {
+          let tempConditionTableData = this.conditionTableData.map((item) => ({
+            tableName: item.tableName,
+            fieldName: item.fieldName,
+            condition: item.condition,
+            flagValue: item.flagValue,
+          }));
+          this.styleFormData.conditionTableStr = JSON.stringify(
+            tempConditionTableData
+          );
+          let tempFormData = JSON.parse(JSON.stringify(this.styleFormData));
+          console.log(tempFormData, this.editIndex);
+          if (this.editIndex != -1) {
+            //修改
+            this.$set(this.styleTableData, this.editIndex, tempFormData);
+            // this.styleTableData[this.editIndex] = tempFormData;
+            this.editIndex = -1;
+          } else {
+            //新增
+            this.styleTableData.push(tempFormData);
+          }
+          console.log(this.styleTableData);
+          this.dialogShow = false;
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //添加样式判断条件回调
+    addConditionHandler() {
+      this.conditionTableData.push({
+        tableName: "",
+        fieldName: "",
+        condition: 1, //1:> 2:< 3:= 4:>= 5:<=
+        flagValue: 0,
+        fieldList: [],
+      });
+    },
+
     // 颜色改变回调
     selectColors(event, tempField) {
       console.log(tempField);
       this.styleFormData[tempField] = event.target.value;
     },
+
+    // 条件表改变回调
+    conditionTableChange(row) {
+      if (!row.tableName) return;
+      row.fieldList = this.allFieldList.filter(
+        (item) => item.tableName == row.tableName
+      );
+    },
+
+    // 条件表删除回调
+    deleteConditionItem(index) {
+      this.conditionTableData.splice(index, 1);
+    },
+
+    // 编辑样式回调
+    editHandler(row, index) {
+      this.editIndex = index;
+      this.styleFormData = JSON.parse(JSON.stringify(row));
+      console.log(row.conditionTableStr);
+      if (row.styleType != 2) {
+        this.conditionTableData = JSON.parse(row.conditionTableStr);
+        this.conditionTableData.forEach((item) => {
+          this.conditionTableChange(item);
+        });
+      }
+
+      this.dialogShow = true;
+    },
+
+    // 删除样式回调
+    delHandler(index) {
+      this.styleTableData.splice(index, 1);
+    },
+
+    // 获取保存数据
+    getSaveData() {
+      let res = this.styleTableData.map((item) => {
+        let styleCode = {
+          rowBgColor: item.rowBgColor,
+          fieldStyleType: item.fieldStyleType,
+          fontColor: item.fontColor,
+          isTagFullBg: item.isTagFullBg,
+          tagType: item.tagType,
+        };
+        return {
+          styleName: item.styleName,
+          styleDescription: item.styleDescription,
+          styleCode: JSON.stringify(styleCode),
+          styleCondtion:
+            item.styleType == 2 ? item.styleCondtion : item.conditionTableStr,
+          styleField: item.styleTable + "." + item.styleField,
+          styleType: item.styleType,
+        };
+      });
+      return res;
+    },
+  },
+  async mounted() {
+    let res = await listType(this.addDateRange({ isEnablePaging: false }, []));
+    this.dictsList = res.rows;
   },
 };
 </script>

ruoyi-ui/src/views/tableMange/index.vue

@@ -404,7 +404,11 @@
             </el-table>
           </el-tab-pane>
           <el-tab-pane label="样式编辑" name="styleEdit">
-            <StyleFormPanel />
+            <StyleFormPanel
+              ref="styleTableRef"
+              :tableFieldList="tableFieldList"
+              :dragTableStyleList="dragTableStyleList"
+            />
           </el-tab-pane>
         </el-tabs>
       </el-col>
@@ -853,6 +857,9 @@ export default {
       isShowAddData: false,
       dataType: [],
       uuid: "",
+
+      // 样式编辑tab数据
+      dragTableStyleList: [],
     };
   },
   computed: {
@@ -864,6 +871,7 @@ export default {
       databaseName: (state) => state.user.dataSource.databaseName,
       databaseType: (state) => state.user.dataSource.databaseType,
       username: (state) => state.user.dataSource.username,
+      tenantId: (state) => state.user.tenant.tenantId,
     }),
     searchArr() {
       if (!this.templateInfo?.where?.length) return [];
@@ -944,6 +952,7 @@ export default {
         tableName: this.tableName,
       };
       console.log(data);
+      let tableComment = this.getTableCommont(this.tableName, this.tableList);
       // 获取当前表单结构信息
       getListName(data).then((res) => {
         // console.log(res);
@@ -965,6 +974,7 @@ export default {
             isExport: true,
             relationTableList: this.relationTableList,
             tableName: this.tableName,
+            tableComment,
             relationFieldList: [],
           };
         });
@@ -992,6 +1002,10 @@ export default {
         databaseType: this.databaseType,
         tableName: row.relationTable,
       };
+      let tableComment = this.getTableCommont(
+        row.relationTable,
+        this.tableList
+      );
       let res = await getListName(data);
       // 关联字段下拉列表数据
       row.relaFieldNameList = res.map((item) => {
@@ -1021,6 +1035,7 @@ export default {
           isExport: true,
           relationTableList,
           tableName: row.relationTable,
+          tableComment,
           relationFieldList: [],
           isChildren: true,
         };
@@ -1514,7 +1529,7 @@ export default {
           //   this.$message.error("请补全关联条件");
           //   return;
           // }
-          console.log('123', columns);
+          console.log("123", columns);
           this.uuid = uuidv4();
           this.tableKey = uuidv4();
           // 表单
@@ -1532,6 +1547,7 @@ export default {
               orderNum: this.menuOrderNum,
               status: "0",
               visible: "0",
+              tenantId: this.tenantId,
             };
             result = await updateMenu(payLoad);
           } else {
@@ -1551,6 +1567,7 @@ export default {
               query: JSON.stringify(tableKeyObj),
               status: "0",
               visible: "0",
+              tenantId: this.tenantId,
             };
             result = await addMenu(payLoad);
           }
@@ -1577,6 +1594,9 @@ export default {
               tableSql: this.getSQLStr(), //  暂定
               tableExportField: tableExportField, //导出字段名及列名
               echoData: JSON.stringify(echoData),
+
+              // 样式相关数据
+              dragTableStyleList: this.$refs.styleTableRef.getSaveData(),
             };
 
             this.dragTableStatisticList?.forEach((item) => {
@@ -1672,6 +1692,7 @@ export default {
       let res = await getTableInfo(tId);
       if (res.code == 200) {
         this.dragTableStatisticList = res.data.dragTableStatisticList;
+        this.dragTableStyleList = res.data.dragTableStyleList;
         let echoData = JSON.parse(res.data.echoData);
         this.tableName = echoData.tableName;
         this.tableFieldList = echoData.tableFieldData;
@@ -1702,7 +1723,7 @@ export default {
         }
         // this.formData.routePath
         this.editData = res.data;
-        let val = await getParticMenu(res.data.sqlKey);
+        let val = await getParticMenu(res.data.tableKey);
         if (val.code == 200) {
           this.menuId = val.data.menuId;
         }
@@ -1808,6 +1829,11 @@ export default {
         }
       });
     },
+
+    // 获取当前表描述
+    getTableCommont(tableName, tableList) {
+      return tableList.find((item) => item.tableName == tableName).tableComment;
+    },
   },
   created() {},
   async mounted() {