Source/UBCS-WEB/src/views/ruleBasic/usableCharacter.vue

@@ -1,13 +1,208 @@
<template>
  <basic-container>

    <el-header>
      <div style="margin-bottom: 15px">
        编码规则：
        <el-select v-model="select" filterable  :filter-method="filterValue" placeholder="请选择" size="small" @click="selectHandler">
          <el-option v-for="(item,index) in queryReleasedList"
                     :key="item.oid"
                     :label="item.name"
                     :value="item.oid"></el-option>
        </el-select>
      </div>
    </el-header>
    <el-main>
      <el-table
        :data="tableData"
        :header-cell-style="{background:'#FAFAFA',color:'#505050'}"
        border
        style="width: 100%;height:  calc(100vh - 320px)"
        @cell-click="cellClickHandler">
        <el-table-column
          align="center"
          label="1"
          prop="aa"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="2"
          prop="b"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="3"
          prop="c">
        </el-table-column>
        <el-table-column
          align="center"
          label="4"
          prop="d">
        </el-table-column>
        <el-table-column
          align="center"
          label="5"
          prop="e">
        </el-table-column>
        <el-table-column
          align="center"
          label="6"
          prop="f">
        </el-table-column>
        <el-table-column
          align="center"
          label="7"
          prop="g">
        </el-table-column>
        <el-table-column
          align="center"
          label="8"
          prop="h">
        </el-table-column>
        <el-table-column
          align="center"
          label="9"
          prop="i">
        </el-table-column>
        <el-table-column
          align="center"
          label="10"
          prop="j">
        </el-table-column>
        <el-table-column
          align="center"
          label="11"
          prop="k">
        </el-table-column>
        <el-table-column
          align="center"
          label="12"
          prop="l">
        </el-table-column>
        <el-table-column
          align="center"
          label="13"
          prop="m">
        </el-table-column>
        <el-table-column
          align="center"
          label="14"
          prop="n">
        </el-table-column>
        <el-table-column
          align="center"
          label="15"
          prop="o">
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <div style="width: 260px; display: flex; align-items: center;margin-top: 5px">
        <p>值：</p>
        <el-input v-model="characterValue" size="small" style="flex: 1;"></el-input>
      </div>
    </el-footer>
    <div style="margin-bottom: 10px;text-align: center">
      <el-button icon="el-icon-plus" plain size="small" type="success">添加</el-button>
      <el-button icon="el-icon-edit" plain size="small" type="primary">修改</el-button>
      <el-button icon="el-icon-delete" plain size="small" type="danger">删除</el-button>
    </div>
  </basic-container>
</template>

<script>
import {getList} from "@/api/code/codeCharcter"
import {gridCodeRule} from "@/api/code/codeCharcter"

export default {
name: "usableCharacter"
  name: "usableCharacter",
  data() {
    return {
      //下拉框数组
      queryReleasedList:[],
      //下拉框初始数据数组
      characterReleasedList: [],
      characterValue: "",
      tableData: [
        {
          aa: 'a1',
          b: 'b1',
          c: 'c1',
          d: 'd1',
          e: 'e1',
          f: 'f1',
          g: 'b1',
          h: 'c1',
          i: 'd1',
          j: 'e1',
          k: 'f1',
          l: 'a1',
          m: 'b1',
          n: 'c1',
          o: 'd1',
        },
        {
          aa: 'a2',
          b: 'b2',
          c: 'c2',
          d: 'd2',
          e: 'e2',
          f: 'f2'
        },
      ],
      select: "",
    }
  },
  watch:{
    select:{
      handler(newV){
        // console.log(newV)
      }
    }
  },
  created() {
    getList({codeRuleId:"1717377846655193088",chartType:"charset",chartValue:"标准规则"}).then(res=>{
      console.log(res)
    })
    this.getCodeRule()
  },
  methods: {
    cellClickHandler(row, column) {
      console.log(row)
      console.log(column)
      console.log(row[column.property])
      this.characterValue = row[column.property]
    },
    getCodeRule() {
      //编码规则已发布数据源
      gridCodeRule({["conditionMap" + "[lcStatus_like]"]: "Released"}).then(res => {
        this.characterReleasedList = res.data.data.records;
        this.queryReleasedList = this.characterReleasedList;
        this.select = this.characterReleasedList[0].name;
      })
    },
    //编码规则下拉框搜索
    filterValue(query) {
      console.log(query)
      if (query !== "") {
        this.queryReleasedList = this.characterReleasedList.filter(item => {
          return item.name.includes(query.toString());
        });
      } else {
        this.queryReleasedList = this.characterReleasedList;
      }
    },
    selectHandler(val){
      console.log(1)
    }
  }
}
</script>

<style scoped>

<style lang="scss" scoped>
.el-header {
  padding: 0;
}
</style>