拖拽表格样式接口调试

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>
@@ -69,7 +69,7 @@
           </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"
@@ -78,6 +78,50 @@
           </el-form-item>
         </template>
         <template v-else>
+          <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>
@@ -135,13 +179,22 @@
             </el-table-column>
             <el-table-column prop="tableKey" label="表名" width="150">
               <template slot-scope="scope">
-                <el-select v-model="scope.row.tableKey" placeholder="请选择">
+                <el-select
+                  v-model="scope.row.tableKey"
+                  @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 +203,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 +249,7 @@
                   size="mini"
                   type="danger"
                   icon="el-icon-delete"
-                  @click="() => {}"
+                  @click="deleteConditionItem(scope.$index)"
                   >删除
                 </el-button>
               </template>
@@ -203,12 +261,18 @@
             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>
@@ -216,18 +280,29 @@
 <script>
 export default {
   name: "StyleFormPanel",
-  props: [],
+  props: {
+    tableFieldList: {
+      default: [],
+      type: Array,
+    },
+  },
   components: {},
   data() {
     return {
       dialogShow: false,
-
+      // 表格及字段数据
+      tableList: [],
+      isShowFieldList: [],
+      allFieldList: [],
+      editIndex: -1,
       // 表格样式数据
       styleTableData: [],
       styleFormData: {
         styleName: "",
         styleDescription: "",
         styleType: 0, //0:行样式  1:字段样式
+        styleTable: "", //样式生效的表
+        styleField: "", //样式生效的字段
         tableKey: "",
         styleCode: "",
         styleCondtion: "",
@@ -236,20 +311,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,
-        },
+        // {
+        //   tableKey: "",
+        //   fieldName: "",
+        //   condition: 1, //1:> 2:< 3:= 4:>= 5:<=
+        //   flagValue: 0,
+        //   fieldList: [],
+        // },
       ],
       conditionList: [
         {
@@ -297,18 +368,157 @@ export default {
       ],
     };
   },
-  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,
+    },
+  },
   methods: {
     // 添加一条样式数据回调
-    addDataDialog() {
+    addDataDialog(index, row) {
+      this.resetStyleFormData();
       this.dialogShow = true;
     },
 
+    // 重置样式表单
+    resetStyleFormData() {
+      Object.assign(this.styleFormData, {
+        styleName: "",
+        styleDescription: "",
+        styleType: 0,
+        tableKey: "",
+        styleCode: "",
+        styleCondtion: "",
+        rowBgColor: "",
+        fieldStyleType: 0,
+        fontColor: "",
+        isTagFullBg: false,
+        tagType: "",
+        styleTable: "",
+        styleField: "",
+      });
+      this.conditionTableData = [];
+    },
+
+    //样式表单保存回调
+    saveStyleFormHandler() {
+      this.$refs.styleFormDataRef.validate((valid) => {
+        if (valid) {
+          this.styleFormData.conditionTableStr = JSON.stringify(
+            this.conditionTableData
+          );
+          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({
+        tableKey: "",
+        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.tableKey) return;
+      console.log(this.allFieldList, row.tableKey);
+      row.fieldList = this.allFieldList.filter(
+        (item) => item.tableName == row.tableKey
+      );
+    },
+
+    // 条件表删除回调
+    deleteConditionItem(index) {
+      this.conditionTableData.splice(index, 1);
+    },
+
+    // 编辑样式回调
+    editHandler(row, index) {
+      this.editIndex = index;
+      this.styleFormData = JSON.parse(JSON.stringify(row));
+      this.conditionTableData = JSON.parse(row.conditionTableStr);
+      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.conditionTableStr,
+          styleField: item.styleTable + "." + item.styleField,
+          styleType: item.styleType,
+        };
+      });
+      return res;
+    },
   },
 };
 </script>

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

@@ -404,7 +404,10 @@
             </el-table>
           </el-tab-pane>
           <el-tab-pane label="样式编辑" name="styleEdit">
-            <StyleFormPanel />
+            <StyleFormPanel
+              ref="styleTableRef"
+              :tableFieldList="tableFieldList"
+            />
           </el-tab-pane>
         </el-tabs>
       </el-col>
@@ -944,6 +947,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 +969,7 @@ export default {
             isExport: true,
             relationTableList: this.relationTableList,
             tableName: this.tableName,
+            tableComment,
             relationFieldList: [],
           };
         });
@@ -992,6 +997,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 +1030,7 @@ export default {
           isExport: true,
           relationTableList,
           tableName: row.relationTable,
+          tableComment,
           relationFieldList: [],
           isChildren: true,
         };
@@ -1576,6 +1586,9 @@ export default {
               tableSql: this.getSQLStr(), //  暂定
               tableExportField: tableExportField, //导出字段名及列名
               echoData: JSON.stringify(echoData),
+
+              // 样式相关数据
+              dragTableStyleList: this.$refs.styleTableRef.getSaveData(),
             };
 
             this.dragTableStatisticList?.forEach((item) => {
@@ -1807,6 +1820,11 @@ export default {
         }
       });
     },
+
+    // 获取当前表描述
+    getTableCommont(tableName, tableList) {
+      return tableList.find((item) => item.tableName == tableName).tableComment;
+    },
   },
   created() {},
   async mounted() {