样式编辑的数据回显与修改/添加字典样式类型

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

@@ -66,6 +66,7 @@
           <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">
@@ -77,7 +78,7 @@
             />
           </el-form-item>
         </template>
-        <template v-else>
+        <template v-else-if="styleFormData.styleType == 1">
           <el-form-item label="样式生效字段">
             <el-col :span="10">
               <el-select
@@ -172,15 +173,76 @@
             </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"
+                  v-model="scope.row.tableName"
                   @change="conditionTableChange(scope.row)"
                   placeholder="请选择"
                 >
@@ -278,6 +340,7 @@
 </template>
 
 <script>
+import { listType } from "@/api/system/tenant/type";
 export default {
   name: "StyleFormPanel",
   props: {
@@ -285,6 +348,10 @@ export default {
       default: [],
       type: Array,
     },
+    dragTableStyleList: {
+      default: [],
+      type: Array,
+    },
   },
   components: {},
   data() {
@@ -300,10 +367,10 @@ export default {
       styleFormData: {
         styleName: "",
         styleDescription: "",
-        styleType: 0, //0:行样式  1:字段样式
+        styleType: 0, //0:行样式  1:字段样式 2:字典样式
         styleTable: "", //样式生效的表
         styleField: "", //样式生效的字段
-        tableKey: "",
+        tableName: "",
         styleCode: "",
         styleCondtion: "",
         rowBgColor: "", //行背景色
@@ -315,7 +382,7 @@ export default {
       },
       conditionTableData: [
         // {
-        //   tableKey: "",
+        //   tableName: "",
         //   fieldName: "",
         //   condition: 1, //1:> 2:< 3:= 4:>= 5:<=
         //   flagValue: 0,
@@ -366,6 +433,8 @@ export default {
           label: "危险",
         },
       ],
+      // 字典列表
+      dictsList: [],
     };
   },
   computed: {
@@ -400,6 +469,31 @@ export default {
       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: {
     // 添加一条样式数据回调
@@ -414,7 +508,7 @@ export default {
         styleName: "",
         styleDescription: "",
         styleType: 0,
-        tableKey: "",
+        tableName: "",
         styleCode: "",
         styleCondtion: "",
         rowBgColor: "",
@@ -432,8 +526,14 @@ export default {
     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(
-            this.conditionTableData
+            tempConditionTableData
           );
           let tempFormData = JSON.parse(JSON.stringify(this.styleFormData));
           console.log(tempFormData, this.editIndex);
@@ -457,7 +557,7 @@ export default {
     //添加样式判断条件回调
     addConditionHandler() {
       this.conditionTableData.push({
-        tableKey: "",
+        tableName: "",
         fieldName: "",
         condition: 1, //1:> 2:< 3:= 4:>= 5:<=
         flagValue: 0,
@@ -473,10 +573,9 @@ export default {
 
     // 条件表改变回调
     conditionTableChange(row) {
-      if (!row.tableKey) return;
-      console.log(this.allFieldList, row.tableKey);
+      if (!row.tableName) return;
       row.fieldList = this.allFieldList.filter(
-        (item) => item.tableName == row.tableKey
+        (item) => item.tableName == row.tableName
       );
     },
 
@@ -489,7 +588,14 @@ export default {
     editHandler(row, index) {
       this.editIndex = index;
       this.styleFormData = JSON.parse(JSON.stringify(row));
-      this.conditionTableData = JSON.parse(row.conditionTableStr);
+      console.log(row.conditionTableStr);
+      if (row.styleType != 2) {
+        this.conditionTableData = JSON.parse(row.conditionTableStr);
+        this.conditionTableData.forEach((item) => {
+          this.conditionTableChange(item);
+        });
+      }
+
       this.dialogShow = true;
     },
 
@@ -512,7 +618,8 @@ export default {
           styleName: item.styleName,
           styleDescription: item.styleDescription,
           styleCode: JSON.stringify(styleCode),
-          styleCondtion: item.conditionTableStr,
+          styleCondtion:
+            item.styleType == 2 ? item.styleCondtion : item.conditionTableStr,
           styleField: item.styleTable + "." + item.styleField,
           styleType: item.styleType,
         };
@@ -520,6 +627,10 @@ export default {
       return res;
     },
   },
+  async mounted() {
+    let res = await listType(this.addDateRange({ isEnablePaging: false }, []));
+    this.dictsList = res.rows;
+  },
 };
 </script>
 

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

@@ -407,6 +407,7 @@
             <StyleFormPanel
               ref="styleTableRef"
               :tableFieldList="tableFieldList"
+              :dragTableStyleList="dragTableStyleList"
             />
           </el-tab-pane>
         </el-tabs>
@@ -856,6 +857,9 @@ export default {
       isShowAddData: false,
       dataType: [],
       uuid: "",
+
+      // 样式编辑tab数据
+      dragTableStyleList: [],
     };
   },
   computed: {
@@ -867,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 [];
@@ -1524,7 +1529,7 @@ export default {
           //   this.$message.error("请补全关联条件");
           //   return;
           // }
-          console.log('123', columns);
+          console.log("123", columns);
           this.uuid = uuidv4();
           this.tableKey = uuidv4();
           // 表单
@@ -1542,6 +1547,7 @@ export default {
               orderNum: this.menuOrderNum,
               status: "0",
               visible: "0",
+              tenantId: this.tenantId,
             };
             result = await updateMenu(payLoad);
           } else {
@@ -1561,6 +1567,7 @@ export default {
               query: JSON.stringify(tableKeyObj),
               status: "0",
               visible: "0",
+              tenantId: this.tenantId,
             };
             result = await addMenu(payLoad);
           }
@@ -1685,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;
@@ -1715,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;
         }