mec-cloud_-intelligent-manufacturing_crm/zkqy-ui/src/views/tableMange/components/ClassificationQueryPanel.vue

<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="conditionNotes" label="按钮名称">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.conditionNotes"
            size="normal"
            clearable
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="conditionField"
        label="条件字段"
        width="100"
      >
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.conditionField"
            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="conditionType" label="类型">
        <template slot-scope="scope">
          <el-select v-model="scope.row.conditionType" clearable filterable>
            <el-option
              v-for="item in conditionTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column> -->
      <el-table-column align="center" prop="componentType" label="按钮类型">
        <template slot-scope="scope">
          <el-select v-model="scope.row.componentType" clearable filterable>
            <el-option
              v-for="item in componentTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="componentSize" label="按钮尺寸">
        <template slot-scope="scope">
          <el-select v-model="scope.row.componentSize" clearable filterable>
            <el-option
              v-for="item in componentSizeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="componentIcon" label="按钮图标">
        <template slot-scope="scope">
          <el-popover
            placement="bottom-start"
            width="460"
            trigger="click"
            @show="$refs['iconSelect'].reset()"
          >
            <IconSelect
              ref="iconSelect"
              @selected="
                (name) => {
                  selected(name, scope.row);
                }
              "
              :active-icon="scope.row.componentIcon"
            />
            <el-input
              slot="reference"
              v-model="scope.row.componentIcon"
              placeholder="点击选择图标"
              readonly
            >
              <svg-icon
                v-if="scope.row.componentIcon"
                slot="prefix"
                :icon-class="scope.row.componentIcon"
                style="width: 25px"
              />
              <i v-else slot="prefix" class="el-icon-search el-input__icon" />
            </el-input>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        prop="conditionDefaultValue"
        label="按钮值"
      >
        <template slot-scope="scope">
          <el-input v-model="scope.row.conditionDefaultValue"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="sort" label="排序">
        <template slot-scope="scope">
          <el-input v-model="scope.row.sort"></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>
import IconSelect from "@/components/IconSelect";
export default {
  name: "ClassificationQueryPanel",
  props: ["tableFieldList", "classificationDataEcho"],
  components: { IconSelect },
  data() {
    return {
      tableData: [],
      fieldList: [],
      conditionList: [
        {
          value: 1,
          label: ">",
        },
        {
          value: 2,
          label: "<",
        },
        {
          value: 3,
          label: "=",
        },
        {
          value: 4,
          label: ">=",
        },
        {
          value: 5,
          label: "<=",
        },
      ],
      conditionTypeOptions: [
        {
          label: "按钮",
          value: "button",
        },
      ],
      componentTypeOptions: [
        {
          value: "primary",
          label: "primary",
        },
        {
          value: "success",
          label: "success",
        },
        {
          value: "warning",
          label: "warning",
        },
        {
          value: "danger",
          label: "danger",
        },
        {
          value: "info",
          label: "info",
        },
        {
          value: "text",
          label: "text",
        },
      ],
      componentSizeOptions: [
        { value: "small", label: "small" },
        { value: "default", label: "default" },
        { value: "large", label: "large" },
      ],
    };
  },
  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 (is_has_del_flag) {
        //   let { fieldName, tableName } = is_has_del_flag;
        //   this.tableData = [];
        //   this.tableData.push({
        //     fieldName: tableName + "." + fieldName,
        //     condition: "=",
        //     refValue: 0,
        //   });
        // } else {
        //   this.tableData = [];
        // }
      },
      deep: true,
      immediate: true,
    },
    myFilterDataEcho: {
      handler(val) {
        if (val) {
          console.log(val);
          this.tableData = val;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    myTableFieldList() {
      console.log(this.tableFieldList);
      return this.tableFieldList;
    },
    myFilterDataEcho() {
      return this.classificationDataEcho;
    },
  },
  methods: {
    // 选择图标
    selected(name, row) {
      console.log(name, row);
      row.componentIcon = name;
      // this.btnGroupFormData.btnIcon = name;
    },
    // 新增条件回调
    addCondition() {
      this.tableData.push({
        conditionNotes: "", //按钮名称
        conditionName: "",
        conditionField: "", //条件字段
        // condition: "",
        conditionType: "button", //类型
        conditionDefaultValue: "", //按钮值
        sort: "", //排序
        componentType: "", //按钮类型
        componentsSize: "", //按钮大小
        componentIcon: "", //按钮图标
      });
    },
    // 编辑条件回调
    editHandler() {},
    // 删除条件回调
    delHandler(index) {
      this.tableData.splice(index, 1);
    },
    // 获取数据筛选条件
    getConditions() {
      return this.tableData;
    },
    // 获取回显数据
    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>