tire-platform-ui/src/components/goodsSelect/index.vue

<template>
  <span class="select-component" style="display:inline-flex;width: 100%;">
    <el-select
      v-model.trim="value"
      size="small"
      :placeholder="configuration.placeholder"
      style="border-right: none;width: 100%"
      :disabled="disabled?disabled:false"
      :multiple="configuration.multiple?configuration.multiple:false"
      :clearable="configuration.clearable?configuration.clearable:false"
      :collapse-tags="configuration.collapseTags?configuration.collapseTags:false"
      filterable
      remote
      @change="changeName()"
      :remote-method="remoteMethod"
    >
      <el-option
        v-for="item in configuration.dicData.length !== 0?dicData.length !== 0?dicData:configuration.dicData:dicData"
        :key="item.id"
        :label="item.cname"
        :value="item.cname"
        @click.native="getRow(item)"
      />
    </el-select>
    <el-button slot="append" icon="el-icon-search" size="mini" @click="dialogVisible = true"
               :disabled="disabled?disabled:false"></el-button>
  <el-dialog
    v-dialogdrag
    title="导入商品"
    :fullscreen="dialogFull"
    :visible.sync="dialogVisible"
    class="el-dialogDeep"
    append-to-body
    top="5vh"
    width="80%">
    <template slot="title">
      <span class="el-dialog__title">
        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
        导入商品
      </span>
      <div style="float: right" class="avue-crud__dialog__menu" @click="dialogFull? dialogFull=false: dialogFull=true">
        <i class="el-icon-full-screen"></i>
      </div>
    </template>
    <el-row style="height: 0">
      <el-col :span="5">
        <div class="box">
          <el-scrollbar>
            <basic-container>
              <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick"/>
            </basic-container>
          </el-scrollbar>
        </div>
      </el-col>
      <el-col :span="19">
        <basic-container>
          <avue-crud :option="option"
                     :data="dataList"
                     ref="crud"
                     v-model="form"
                     :page.sync="page"
                     :before-close="beforeClose"
                     @search-change="searchChange"
                     @search-reset="searchReset"
                     @refresh-change="refreshChange"
                     @selection-change="selectionChange"
                     @on-load="onLoad"
                     @saveColumn="saveColumn"
                     @tree-load="treeLoad">
          </avue-crud>
        </basic-container>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirmSelection"
                 :disabled="configuration.multipleChoices === true?false:selection.length === 1?false:true">确 定</el-button>
    </span>
  </el-dialog>
  </span>
</template>

<script>
import option from "./configuration/mainList.json";
import {getGoods, getDeptLazyTree} from "@/api/basicData/customerInquiry"

export default {
  name: "index",
  props: {
    disabled: Boolean,
    value: String,
    configuration: Object,
  },
  model: {
    prop: 'value',
    event: 'returnBack'
  },
  data() {
    return {
      dialogFull: false,
      form: {},
      dicData: [],
      dialogVisible: false,
      value: '',
      option: {},
      parentId: 0,
      dataList: [],
      selection: [],
      treeOption: {
        nodeKey: 'id',
        lazy: true,
        treeLoad: function (node, resolve) {
          const parentId = (node.level === 0) ? 0 : node.data.id;
          getDeptLazyTree(parentId).then(res => {
            resolve(res.data.data.map(item => {
              return {
                ...item,
                leaf: !item.hasChildren
              }
            }))
          });
        },
        addBtn: false,
        menu: false,
        size: 'small',
        props: {
          labelText: '标题',
          label: 'title',
          value: 'value',
          children: 'children'
        }
      },
      page: {
        pageSize: 10,
        pagerCount: 5,
        total: 0,
      },
      // 远程模糊查找loading
      loading: false,
      queryParams: {
        size: 10,
        current: 1
      },
    }
  },
  async created() {
    this.option = await this.getColumnData(this.getColumnName(49), option);
    // this.option.searchShow = this.configuration.searchShow ? this.configuration.searchShow : false
    this.remoteMethod()
  },
  methods: {
    changeName(){
      this.$emit('returnBack', this.value)
      let optionList = this.configuration.dicData.length !== 0?this.dicData.length !== 0?this.dicData:this.configuration.dicData:this.dicData;
      let valueName = {};
      optionList.map(item =>{
        if(item.cname === this.value){
          valueName.list = item.goodsSpecificationList.map(item=>{
            return item.cname
          })
          valueName.id =  item.id
        }
      })
      this.$emit('valueName',valueName)
    },
    getRow(row) {
      this.$emit('getRow', row)
    },
    //刷新触发
    refreshChange() {
      this.onLoad(this.page)
    },
    //确认导出触发
    confirmSelection() {
      this.dicData = []
      if (this.configuration.multipleChoices === true) {
        let value = []
        for (let item in this.selection) {
          this.dicData.push({cname: this.selection[item].cname,goodList: this.selection[item].goodsSpecificationList})
          value.push(this.selection[item].cname)
        }
        this.value = value
      } else {
        this.dicData.push({cname: this.selection[0].cname,goodList: this.selection[0].goodsSpecificationList})
        this.value = this.selection[0].cname
      }
      this.$emit('returnRow', this.selection)
      let valueName = {
        id:this.selection[0].id,
        list:this.selection[0].goodsSpecificationList.map(item=>{
          return item.cname
        })
      }
      this.selection = []
      this.$emit('returnBack', this.value)
      this.dialogVisible = false
      this.$emit('receiveList',this.dicData)
      this.$emit('valueName',valueName)
    },
    //选中触发
    selectionChange(selection) {
      this.selection = selection
    },
    nodeClick(data) {
      this.treeDeptId = data.id;
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },
    //查询全部
    initData() {
      getGoods().then(res => {
        console.log(this.form);
        const column = this.findObject(this.option.column, "parentId");
        column.dicData = res.data.data.records;
      });
    },
    //新增子项触发
    handleAdd(row) {
      this.parentId = row.id;
      const column = this.findObject(this.option.column, "parentId");
      column.value = row.id;
      column.addDisabled = true;
      this.$refs.crud.rowAdd();
    },
    //点击新增时触发
    beforeClose(done) {
      this.parentId = "";
      const column = this.findObject(this.option.column, "parentId");
      column.value = "";
      column.addDisabled = false;
      done();
    },
    //点击搜索按钮触发
    searchChange(params, done) {
      this.treeDeptId = '';
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done()
    },
    //搜索重置按钮触发
    searchReset() {
      this.treeDeptId = '';
      this.onLoad(this.page);
    },
    onLoad(page, params = {parentId: 0}) {
      // let queryParams = Object.assign({}, params, {
      //   size: page.pageSize,
      //   current: page.currentPage,
      //   corpsTypeId: this.treeDeptId
      // })
      getGoods(page.currentPage, page.pageSize, this.treeDeptId,params).then(res => {
        this.dataList = res.data.data.records
        this.page.total = res.data.data.total
        if (this.page.total) {
          this.option.height = window.innerHeight - 350;
        }
      })
    },
    //树桩列点击展开触发
    treeLoad(tree, treeNode, resolve) {
      const parentId = tree.id;
      getGoods({parentId: parentId}).then(res => {
        resolve(res.data.data.records);
      });
    },
    // 远程模糊查找
    remoteMethod(query) {
      if (query) {
        this.loading = true;
        let params = {
          // size: 10,
          // current: 1,
          cname: query
        }
        getGoods(1, 10, '', params).then(res => {
          this.dicData = res.data.data.records
          this.loading = false;
        });
      } else {
        this.loading = true
        this.queryParams = {
          size: 10,
          current: 1
        }
        getGoods(1, 10, '').then(res => {
          this.dicData = []
          this.configuration.dicData.forEach((e,index) => {
            res.data.data.records.forEach(item => {
              if (e.cname == item.cname) {
                this.configuration.dicData.splice(index, 1)
              }
            })
          })
          this.configuration.dicData = this.configuration.dicData.concat(res.data.data.records)
          // this.configuration.dicData = res.data.data.records
          this.removeRepeat()
          this.loading = false;
        });
      }
    },
    // 去重
    removeRepeat() {
      let obj = []
      this.configuration.dicData = this.configuration.dicData.reduce((current,next) => {
        obj[next.cname] ? '': obj[next.cname] = true && current.push(next)
        return current
      }, [])
    },
    //列保存触发
    async saveColumn() {
      const inSave = await this.saveColumnData(
        this.getColumnName(49),
        this.option
      );
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
    },
  }
};
</script>

<style scoped lang="scss">
.el-dialogDeep {
  ::v-deep .el-dialog {
    .el-dialog__body, .el-dialog__footer {
      padding-bottom: 0 !important;
      padding-top: 0 !important;
    }
  }
}
</style>