|
|
@@ -0,0 +1,307 @@
|
|
|
+<template>
|
|
|
+ <span class="select-component" style="display:inline-flex;width: 100%;">
|
|
|
+ <el-select
|
|
|
+ v-model="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
|
|
|
+ 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"
|
|
|
+ @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: 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
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // this.option.searchShow = this.configuration.searchShow ? this.configuration.searchShow : false
|
|
|
+ this.remoteMethod()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeName(){
|
|
|
+ this.$emit('returnBack', this.value)
|
|
|
+ },
|
|
|
+ getRow(row) {
|
|
|
+ this.$emit('getRow', row)
|
|
|
+ },
|
|
|
+ //刷新触发
|
|
|
+ refreshChange() {
|
|
|
+ this.page = {
|
|
|
+ pageSize: 10,
|
|
|
+ pagerCount: 5,
|
|
|
+ total: 0,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //确认导出触发
|
|
|
+ confirmSelection() {
|
|
|
+ this.dicData = []
|
|
|
+ if (this.configuration.multipleChoices === true) {
|
|
|
+ let value = []
|
|
|
+ for (let item in this.selection) {
|
|
|
+ this.dicData.push({cname: this.selection[item].cname})
|
|
|
+ value.push(this.selection[item].cname)
|
|
|
+ }
|
|
|
+ this.value = value
|
|
|
+ } else {
|
|
|
+ this.dicData.push({cname: this.selection[0].cname})
|
|
|
+ this.value = this.selection[0].cname
|
|
|
+ }
|
|
|
+ this.$emit('returnRow', this.selection)
|
|
|
+ this.selection = []
|
|
|
+ this.$emit('returnBack', this.value)
|
|
|
+ this.dialogVisible = false
|
|
|
+ this.$emit('receiveList',this.dicData)
|
|
|
+ },
|
|
|
+ //选中触发
|
|
|
+ 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) {
|
|
|
+ console.log(params)
|
|
|
+ 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 - 500;
|
|
|
+ } else {
|
|
|
+ this.option.height = window.innerHeight - 200;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //树桩列点击展开触发
|
|
|
+ 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.id] ? '': obj[next.id] = true && current.push(next)
|
|
|
+ return current
|
|
|
+ }, [])
|
|
|
+ },
|
|
|
+ }
|
|
|
+};
|
|
|
+</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>
|
lichao