补充代码提交

zkqy-ui/src/views/tableMange/components/DataFilterPanel.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="data-filter-wrap">
+    <el-button
+      type="primary"
+      class="inline-large-button mb10"
+      icon="el-icon-plus"
+      size="mini"
+      @click="addCondition"
+    >
+      添加条件
+    </el-button>
+    <el-table :data="tableData" style="width: 100%">
+      <el-table-column align="center" label="序号" type="index" width="50">
+      </el-table-column>
+      <el-table-column
+        align="center"
+        prop="fieldName"
+        label="条件字段"
+        width="100"
+      >
+        <template slot-scope="scope">
+          <el-select
+            v-model="scope.row.fieldName"
+            placeholder="请选择条件字段"
+            clearable
+            filterable
+          >
+            <el-option
+              v-for="item in fieldList"
+              :key="item.fieldName"
+              :label="item.fieldDescription"
+              :value="item.tableName + '.' + item.fieldName"
+            >
+              <span class="discribe" style="float: left">{{
+                item.fieldDescription
+              }}</span>
+              <span style="float: right; color: #8492a6; font-size: 13px">{{
+                item.fieldName
+              }}</span>
+            </el-option>
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" prop="condition" label="条件">
+        <template slot-scope="scope">
+          <el-select v-model="scope.row.condition" placeholder="请选择">
+            <el-option
+              v-for="item in conditionList"
+              :key="item.label"
+              :label="item.label"
+              :value="item.label"
+            >
+            </el-option>
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" prop="refValue" label="参照值">
+        <template slot-scope="scope">
+          <el-input v-model="scope.row.refValue"></el-input>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="delHandler(scope.$index)"
+            >删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DataFilter",
+  props: ["tableFieldList", "filterDataEcho"],
+  components: {},
+  data() {
+    return {
+      tableData: [],
+      fieldList: [],
+      conditionList: [
+        {
+          value: 1,
+          label: ">",
+        },
+        {
+          value: 2,
+          label: "<",
+        },
+        {
+          value: 3,
+          label: "=",
+        },
+        {
+          value: 4,
+          label: ">=",
+        },
+        {
+          value: 5,
+          label: "<=",
+        },
+      ],
+    };
+  },
+  watch: {
+    myTableFieldList: {
+      handler(nval) {
+        this.fieldList = nval;
+
+        console.log(this.fieldList);
+        // 初始化删除逻辑条件
+        let is_has_del_flag = nval.find((item) => {
+          return item.fieldName == "del_flag";
+        });
+        console.log(is_has_del_flag);
+        if (!this.tableData.length && is_has_del_flag) {
+          let { fieldName, tableName } = is_has_del_flag;
+          this.tableData.push({
+            fieldName: tableName + "." + fieldName,
+            condition: "=",
+            refValue: 0,
+          });
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+    myFilterDataEcho: {
+      handler(val) {
+        if (val) {
+          this.tableData = JSON.parse(decodeURIComponent(this.filterDataEcho));
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  computed: {
+    myTableFieldList() {
+      return this.tableFieldList;
+    },
+    myFilterDataEcho() {
+      return this.filterDataEcho;
+    },
+  },
+  methods: {
+    // 新增条件回调
+    addCondition() {
+      this.tableData.push({
+        fieldName: "",
+        condition: "",
+        refValue: "",
+      });
+    },
+    // 编辑条件回调
+    editHandler() {},
+    // 删除条件回调
+    delHandler() {
+      this.tableData.splice(index, 1);
+    },
+    // 获取数据筛选条件
+    getConditions() {
+      let res = this.tableData.filter((item) => {
+        return (
+          item.fieldName &&
+          item.condition &&
+          (item.refValue == 0 || item.refValue)
+        );
+      });
+      return res;
+    },
+    // 获取回显数据
+    getEchoData() {
+      return JSON.stringify(this.tableData);
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped lang="scss">
+.discribe {
+  display: block;
+  max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>