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 align="center" prop="conditionName" label="条件名称">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.conditionName"
            size="normal"
            clearable
          ></el-input>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        prop="conditionField"
        label="条件字段">
        <template slot-scope="scope">
          <el-select v-model="scope.row.conditionField" placeholder="请选择条件字段" 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="conditionType" label="条件类型">
        <template slot-scope="scope">
          <el-select v-model="scope.row.conditionType" 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="conditionDefaultValue" label="默认条件值">
        <template slot-scope="scope">
          <el-input v-model="scope.row.conditionDefaultValue"
                    :disabled="scope.row.conditionType!='button' && scope.row.conditionType!='radio'"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="sort" label="渲染顺序" width="80">
        <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"
            @click="openHandler(scope)"
          >更多
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="delHandler(scope.$index)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  查询条件更多设置弹窗  -->
    <el-dialog :title="settings.title" :visible.sync="settings.open" width="500px" append-to-body>
      <!-- 下拉框数据来源（字典、表数据）设置label、value -->
      <!-- 时间范围（选择到年、月、日 时、分、秒）   -->
      <el-form label-width="100px" v-if="tableData.length!=0">
        <el-form-item label="显示类型">
          <el-select v-model="tableData[settings.dataIndex].componentType" clearable filterable>
            <el-option v-for="item in componentTypeOptions" :key="item.value" :label="item.label"
                       :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="显示尺寸">
          <el-select v-model="tableData[settings.dataIndex].componentSize" clearable filterable>
            <el-option v-for="item in componentSizeOptions" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="显示图标">
          <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
            <IconSelect ref="iconSelect" @selected="(name) => selected(name, settings.row)"
                        :active-icon="tableData[settings.dataIndex].componentIcon"/>
            <el-input slot="reference" v-model="tableData[settings.dataIndex].componentIcon"
                      placeholder="点击选择图标" readonly>
              <svg-icon v-if="tableData[settings.dataIndex].componentIcon" slot="prefix"
                        :icon-class="tableData[settings.dataIndex].componentIcon"
                        style="width: 25px"/>
              <i v-else slot="prefix" class="el-icon-search el-input__icon"/>
            </el-input>
          </el-popover>
        </el-form-item>
        <el-form-item label="条件描述">
          <el-input v-model="tableData[settings.dataIndex].conditionNotes" type="text"
                    placeholder="描述例句（请输入姓名、请输入编号...）"/>
        </el-form-item>
        <el-form-item label="下拉sql" v-show="tableData[settings.dataIndex].conditionType=='select'">
          <el-input v-model="tableData[settings.dataIndex].conditionDatasource" type="textarea" :rows="8"
                    placeholder="请输入当前下拉框数据来源sql语句,例如：SELECT custom_name AS `label`, custom_no AS `value`, id AS id FROM {DBNAME}.customer"/>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import IconSelect from "@/components/IconSelect";

// mysql 语法校验插件
// import 'codemirror/theme/ambiance.css'
// import 'codemirror/lib/codemirror.css'
// import 'codemirror/addon/hint/show-hint.css'

export default {
  name: "ClassificationQueryPanel",
  props: ["tableFieldList", "classificationDataEcho"],
  components: {IconSelect},
  data() {
    return {
      settings: {
        row: {},
        title: "",
        open: false,
        dataIndex: 0,
      },
      tableData: [],
      fieldList: [],
      conditionList: [
        {
          value: 1,
          label: ">",
        },
        {
          value: 2,
          label: "<",
        },
        {
          value: 3,
          label: "=",
        },
        {
          value: 4,
          label: ">=",
        },
        {
          value: 5,
          label: "<=",
        },
      ],
      conditionTypeOptions: [
        {
          label: "文本",
          value: "input",
        },
        {
          label: "按钮",
          value: "button",
        },
        {
          label: "下拉",
          value: "select",
        },
        {
          label: "单选",
          value: "radio",
        },
        {
          label: "时间范围",
          value: "datetimerange",
        },
      ],
      componentTypeOptions: [
        {
          label: "主要",
          value: "primary",
        },
        {
          label: "成功",
          value: "success",
        },
        {
          label: "警告",
          value: "warning",
        },
        {
          label: "危险",
          value: "danger",
        },
        {
          label: "信息",
          value: "info",
        },
        {
          label: "文本",
          value: "text",
        },
      ],
      componentSizeOptions: [
        {value: "small", label: "较小"},
        {value: "default", label: "默认"},
        {value: "large", label: "较大"},
      ],
    };
  },
  watch: {
    myTableFieldList: {
      handler(nval) {
        this.fieldList = nval;
      },
      deep: true,
      immediate: true,
    },
    myFilterDataEcho: {
      handler(val) {
        if (val) {
          this.tableData = val;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    myTableFieldList() {
      return this.tableFieldList;
    },
    myFilterDataEcho() {
      return this.classificationDataEcho;
    },
  },
  methods: {
    // 联合查询按钮配置
    openHandler(scope) {
      // console.log(scope.$index)
      // 设置当前选择查询条件的sql语句
      this.settings.dataIndex = scope.$index;
      this.settings.row = scope.row;
      this.settings.open = true
      this.settings.title = "设置条件-" + scope.row.conditionName
    },
    // 处理联合查询，默认值输入框禁用逻辑
    handleDisabled(row) {
      // 如果是文本类型则禁用默认值输入框
      if (row.componentType == 'input') {
        return 'disabled';
      }
      return false;
    },
    // 选择图标
    selected(name, row) {
      row.componentIcon = name;
    },
    // 新增条件回调
    addCondition() {
      this.tableData.push({
        conditionName: "",  // 名称
        conditionNotes: "", //  描述信息
        conditionField: "", //条件字段
        // condition: "",
        conditionType: "input", //类型
        conditionDefaultValue: "", //按钮值
        sort: this.tableData.length + 1, //排序
        componentType: "primary", //显示类型
        componentSize: "default", //尺寸
        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>