|
|
@@ -0,0 +1,360 @@
|
|
|
+<template>
|
|
|
+ <ele-modal :visible.sync="visible" title="" width="80%" @close="cancel">
|
|
|
+ <el-row :gutter="40">
|
|
|
+ <el-col :span="12">
|
|
|
+ <headerTitle>
|
|
|
+ <template v-slot:title>
|
|
|
+ 可选
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ class="ml20"
|
|
|
+ size="mini"
|
|
|
+ @click="handleConect"
|
|
|
+ >关联</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ icon="icon-search"
|
|
|
+ @click="reload"
|
|
|
+ >搜索</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </headerTitle>
|
|
|
+ <el-form label-width="100px">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item :label="`分类`">
|
|
|
+ <categorySelect
|
|
|
+ :pid="type"
|
|
|
+ :key="type"
|
|
|
+ v-model="where.categoryLevelGroupId"
|
|
|
+ />
|
|
|
+ <!-- <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ clearable
|
|
|
+ v-model="where.categoryLevelGroupId"
|
|
|
+ ></el-input> -->
|
|
|
+ </el-form-item></el-col
|
|
|
+ >
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item :label="`编码`">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ clearable
|
|
|
+ v-model="where.code"
|
|
|
+ ></el-input></el-form-item
|
|
|
+ ></el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item :label="`名称`">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ clearable
|
|
|
+ v-model="where.name"
|
|
|
+ ></el-input></el-form-item
|
|
|
+ ></el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="型号">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ clearable
|
|
|
+ v-model="where.modelType"
|
|
|
+ ></el-input></el-form-item
|
|
|
+ ></el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <ele-pro-table
|
|
|
+ ref="table"
|
|
|
+ :columns="columns"
|
|
|
+ :datasource="datasourceShow"
|
|
|
+ :selection.sync="selection"
|
|
|
+ cache-key="link-material-dialog"
|
|
|
+ height="45vh"
|
|
|
+ :initLoad="false"
|
|
|
+ :need-page="false"
|
|
|
+ >
|
|
|
+ </ele-pro-table>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <headerTitle
|
|
|
+ ><template v-slot:title
|
|
|
+ >已关联
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ class="ml20"
|
|
|
+ size="mini"
|
|
|
+ @click="handleCancelConect"
|
|
|
+ >取消关联</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ icon="icon-search"
|
|
|
+ @click="reloadRight"
|
|
|
+ >搜索</el-button
|
|
|
+ ></template
|
|
|
+ ></headerTitle
|
|
|
+ >
|
|
|
+ <el-form label-width="100px">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item :label="`分类`">
|
|
|
+ <categorySelect
|
|
|
+ :pid="type"
|
|
|
+ :key="type"
|
|
|
+ v-model="whereRight.categoryLevelGroupId"
|
|
|
+ /> </el-form-item
|
|
|
+ ></el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item :label="`编码`">
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ placeholder="请输入"
|
|
|
+ v-model="whereRight.code"
|
|
|
+ ></el-input></el-form-item
|
|
|
+ ></el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item :label="`名称`">
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ placeholder="请输入"
|
|
|
+ v-model="whereRight.name"
|
|
|
+ ></el-input></el-form-item
|
|
|
+ ></el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="型号">
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ placeholder="请输入"
|
|
|
+ v-model="whereRight.modelType"
|
|
|
+ ></el-input></el-form-item
|
|
|
+ ></el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <ele-pro-table
|
|
|
+ ref="tableRight"
|
|
|
+ :columns="columnsRight"
|
|
|
+ :datasource="datasourceRightShow"
|
|
|
+ :selection.sync="selectionRight"
|
|
|
+ height="45vh"
|
|
|
+ :initLoad="false"
|
|
|
+ :need-page="false"
|
|
|
+ cache-key="link-material-dialog-right"
|
|
|
+ >
|
|
|
+ </ele-pro-table
|
|
|
+ ></el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <div slot="footer" class="footer">
|
|
|
+ <el-button type="primary" @click="save">保存</el-button>
|
|
|
+ <el-button @click="cancel">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </ele-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getRelatesInformationList,
|
|
|
+ unassociated,
|
|
|
+ productTieUpMaterial
|
|
|
+ } from '@/api/material/product.js';
|
|
|
+ import dictMixins from '@/mixins/dictMixins';
|
|
|
+ import categorySelect from '@/components/CommomSelect/category-select.vue';
|
|
|
+ export default {
|
|
|
+ mixins: [dictMixins],
|
|
|
+ components: { categorySelect },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ visible: false,
|
|
|
+ row: {},
|
|
|
+ datasource: [],
|
|
|
+ datasourceShow: [],
|
|
|
+ datasourceRightShow: [],
|
|
|
+ datasourceRight: [],
|
|
|
+ selectionRight: [],
|
|
|
+ selection: [],
|
|
|
+ whereRight: {},
|
|
|
+ where: {},
|
|
|
+ type: '',
|
|
|
+ idMap: {
|
|
|
+ 6: '1678278090828136449',
|
|
|
+ 5: '1678277781556936705'
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.requestDict('类型用途');
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ catogaryName () {
|
|
|
+ return this.getDictValue('类型用途', this.type);
|
|
|
+ },
|
|
|
+ dict () {},
|
|
|
+ columns () {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ type: 'selection',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: `${this.catogaryName}分类`,
|
|
|
+ prop: 'categoryLevelGroupName'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: `${this.catogaryName}编码`,
|
|
|
+ prop: 'code'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: `${this.catogaryName}名称`,
|
|
|
+ prop: 'name'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '型号',
|
|
|
+ prop: 'modelType'
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ },
|
|
|
+ columnsRight () {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ type: 'selection',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: `${this.catogaryName}分类`,
|
|
|
+ prop: 'categoryLevelGroupName'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: `${this.catogaryName}编码`,
|
|
|
+ prop: 'code'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: `${this.catogaryName}名称`,
|
|
|
+ prop: 'name'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '型号',
|
|
|
+ prop: 'modelType'
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ open (type, row) {
|
|
|
+ this.type = type;
|
|
|
+ this.row = row;
|
|
|
+ this.getDatasource();
|
|
|
+ this.getDatasourceRight();
|
|
|
+ this.visible = true;
|
|
|
+ },
|
|
|
+ cancel () {
|
|
|
+ this.visible = false;
|
|
|
+ },
|
|
|
+ async save () {
|
|
|
+ if (!this.datasourceRightShow.length) {
|
|
|
+ return this.$message.error('请添加关联数据');
|
|
|
+ }
|
|
|
+ const params = {
|
|
|
+ mainCategoryId: this.row.categoryLevelId,
|
|
|
+ mainCategoryLevelRootId: this.row.categoryLevelGroupId,
|
|
|
+ materialDetailsPOList: this.datasourceRightShow.map((i) => ({
|
|
|
+ ...i,
|
|
|
+ categoryLevelRootId: this.type
|
|
|
+ }))
|
|
|
+ };
|
|
|
+ await productTieUpMaterial(params);
|
|
|
+ this.cancel();
|
|
|
+ this.$message.success('操作成功!');
|
|
|
+ this.$emit('success');
|
|
|
+ },
|
|
|
+ handleConect () {
|
|
|
+ if (!this.selection.length) {
|
|
|
+ return this.$message.error('请选择关联数据');
|
|
|
+ }
|
|
|
+ this.datasource = this.datasource.filter((i) =>
|
|
|
+ this.selection.find((t) => t.categoryId != i.categoryId)
|
|
|
+ );
|
|
|
+ this.datasourceShow = this.datasourceShow.filter((i) =>
|
|
|
+ this.selection.find((t) => t.categoryId != i.categoryId)
|
|
|
+ );
|
|
|
+
|
|
|
+ this.datasourceRightShow.push(...this.selection);
|
|
|
+ this.datasourceRight.push(...this.selection);
|
|
|
+
|
|
|
+ this.selection = [];
|
|
|
+ },
|
|
|
+ handleCancelConect () {
|
|
|
+ if (!this.selectionRight.length) {
|
|
|
+ return this.$message.error('请选择取消关联数据');
|
|
|
+ }
|
|
|
+
|
|
|
+ this.datasourceRight = this.datasourceRight.filter((i) =>
|
|
|
+ this.selectionRight.find((t) => t.categoryId != i.categoryId)
|
|
|
+ );
|
|
|
+ this.datasourceRightShow = this.datasourceRightShow.filter((i) =>
|
|
|
+ this.selectionRight.find((t) => t.categoryId != i.categoryId)
|
|
|
+ );
|
|
|
+
|
|
|
+ this.datasourceShow.push(...this.selectionRight);
|
|
|
+ this.datasource.push(...this.selectionRight);
|
|
|
+
|
|
|
+ this.selectionRight = [];
|
|
|
+ },
|
|
|
+ reload () {
|
|
|
+ this.datasourceShow = this.datasource.filter((item) => {
|
|
|
+ return (
|
|
|
+ (!this.where.categoryLevelGroupId ||
|
|
|
+ item.categoryLevelGroupId.includes(
|
|
|
+ this.where.categoryLevelGroupId
|
|
|
+ )) &&
|
|
|
+ (!this.where.code || item.code.includes(this.where.code)) &&
|
|
|
+ (!this.where.name || item.name.includes(this.where.name)) &&
|
|
|
+ (!this.where.modelType ||
|
|
|
+ item.modelType.includes(this.where.modelType))
|
|
|
+ );
|
|
|
+ });
|
|
|
+ },
|
|
|
+ reloadRight () {
|
|
|
+ this.datasourceRightShow = this.datasourceRight.filter((item) => {
|
|
|
+ return (
|
|
|
+ (!this.whereRight.categoryLevelGroupId ||
|
|
|
+ item.categoryLevelGroupId.includes(
|
|
|
+ this.whereRight.categoryLevelGroupId
|
|
|
+ )) &&
|
|
|
+ (!this.whereRight.code ||
|
|
|
+ item.code.includes(this.whereRight.code)) &&
|
|
|
+ (!this.whereRight.name ||
|
|
|
+ item.name.includes(this.whereRight.name)) &&
|
|
|
+ (!this.whereRight.modelType ||
|
|
|
+ item.modelType.includes(this.whereRight.modelType))
|
|
|
+ );
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async getDatasource () {
|
|
|
+ const data = await unassociated({
|
|
|
+ categoryLevelGroupId: this.idMap[this.type]
|
|
|
+ });
|
|
|
+ this.datasource = data.slice(0);
|
|
|
+ this.datasourceShow = data.slice(0);
|
|
|
+ },
|
|
|
+ async getDatasourceRight () {
|
|
|
+ const data = await getRelatesInformationList({
|
|
|
+ mainCategoryId: this.row.categoryLevelId,
|
|
|
+ // categoryLevelGroupId: this.idMap[this.type],
|
|
|
+ categoryLevelRootId: this.type
|
|
|
+ });
|
|
|
+ this.datasourceRight = data.slice(0);
|
|
|
+ this.datasourceRightShow = data.slice(0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .ml20 {
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ .footer {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+</style>
|