1，使用组件
<template>
<div>
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
<el-row>
<el-col :span='8'>
<el-form-item label="运输方案">
<el-select v-model="tList" multiple size='mini' placeholder="请选择" style="width:100%">
<el-option v-for="item in transportationPlanList" :key="item.dictValue"
:label="item.dictLabel" :value="item.dictValue" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span='16'>
<el-form-item label="开工令" prop="projects">
<el-select v-model="projectIdList" ref='projectRef' style="width:100%;" size='mini' multiple
placeholder="请选择" @focus="selectProjectClick" @remove-tag="removeProjectClick">
<!-- 插入图标 color: #409eff;-->
<template slot="prefix">
<span style="padding: 5px;line-height: 40px;font-size: 16px; ">
<i class="el-icon-circle-plus-outline"></i>
</span>
</template>
<el-option v-for="item in form.projects" :key="item.projectId"
:label="item.projectMachineNo" :value="item.projectId">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span='16'>
<el-form-item label="开工令名称">
<el-input v-model='projectNameStr' readonly placeholder="自动带出" style='width:100%;' size="mini">
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 选单组件 -->
<select-order-list :isCheckBox='true' :dialogStatus='projectStatus' @customDbRowClick='getSelectProjectData'
@customCloseClick='projectStatus=false'>
</select-order-list>
<el-button type='primary' @click="submitFormClick">确定</el-button>
</div>
</template>
<script>
import selectOrderList from './selectOrderList.vue';
export default {
components: {
selectOrderList
},
data() {
const validatorProject = (rule, value, callback) => {
if (value.length == 0) callback(new Error('开工令不能为空'));
else callback();
}
return {
tList: [],
projectStatus: false,
projectNameStr: null,
projectIdList: [],
form: {
projects: [],
transportWay:null
},
rules: {
projects: [{
required: true,
validator: validatorProject,
trigger: 'blur'
}],
},
transportationPlanList: [{
createBy: "admin",
createTime: "2022-10-11 12:15:05",
default: false,
dictCode: "30010",
dictLabel: "拼箱LCL",
dictSort: 0,
dictType: "transportation_plan",
dictValue: "拼箱LCL",
isDefault: "N",
listClass: "default",
status: "0"
}, {
createBy: "admin",
createTime: "2022-10-11 12:15:22",
default: false,
dictCode: "30011",
dictLabel: "20GP",
dictSort: 0,
dictType: "transportation_plan",
dictValue: "20GP",
isDefault: "N",
listClass: "default",
status: "0",
},
{
createBy: "admin",
createTime: "2022-10-11 12:15:36",
default: false,
dictCode: "30012",
dictLabel: "40GP",
dictSort: 0,
dictType: "transportation_plan",
dictValue: "40GP",
isDefault: "N",
listClass: "default",
status: "0"
},
{
createBy: "admin",
createTime: "2022-10-11 12:15:54",
default: false,
dictCode: "30013",
dictLabel: "20OT",
dictSort: 0,
dictType: "transportation_plan",
dictValue: "20OT",
isDefault: "N",
listClass: "default",
status: "0"
}
],
}
},
methods: {
submitFormClick() {
this.$refs['formRef'].validate((valid) => {
if (valid) {
this.form.transportWay = this.tList? this.tList.join(','):null;
console.log('success', this.form)
} else {
console.log('err')
}
})
},
getSelectProjectData(list) {
list.map(item => {
delete item.isDbClick;
item.projectMachineNo = item.machineNo != '' ? item.projectNo + '(' + item.machineNo + '#)' : item.projectNo;
if (!this.form.projects.includes(item)) this.form.projects.push(item);
})
this.handleData();
this.projectStatus = false;
},
selectProjectClick() {
this.$refs.projectRef.blur();
this.projectStatus = true;
},
removeProjectClick(e) {
this.form.projects = this.form.projects.filter(item => item.projectId != e);
this.handleData();
},
handleData() {
let arr = [],projectNameNew = null;
this.form.projects.map(item => {
if (item.projectName.indexOf('(') == -1) projectNameNew = item.projectName;
else projectNameNew = item.projectName.substr(0, (item.projectName).indexOf('('));
if (arr.indexOf(projectNameNew) == -1) arr.push(projectNameNew);
})
this.projectNameStr = arr.join(',');
this.projectIdList = this.form.projects.map(item => item.projectId);
},
}
}
</script>
<style scoped></style>
2，封装组件
<template>
<el-dialog title="选单" :visible.sync="dialogStatus" :close-on-click-modal='false' :before-close='closeClick'>
<el-button size='mini' type='primary' :disabled="selection.length == 0" v-if='isCheckBox' @click='submitClick'>
选中</el-button>
<el-table ref='tableRef' border :data="tableData" style="width: 800px;margin-top: 20px;" :row-style="isBlue"
@selection-change="handleSelectionChange" @row-dblclick='dbRowClick'>
<el-table-column type="selection" width="55" align="center" v-if='isCheckBox'></el-table-column>
<el-table-column label="开工令" align="center" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ scope.row.projectNo}}</span>
</template>
</el-table-column>
<el-table-column label="项目名称" align="center" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ scope.row.projectName}}</span>
</template>
</el-table-column>
<el-table-column label="机台号" align="center" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ scope.row.machineNo}}</span>
</template>
</el-table-column>
</el-table>
</el-dialog>
</template>
<script>
export default {
props: {
dialogStatus: {
type: Boolean
},
isCheckBox: {
type: Boolean,
default: false,
}
},
data() {
return {
tableData: [{
projectId: '112',
projectNo: 'O260',
projectName: '运输支架(#3)',
machineNo: '3',
},
{
projectId: '113',
projectNo: 'O260',
projectName: '运输支架(6#)',
machineNo: '6',
},
{
projectId: '114',
projectNo: 'P286',
projectName: '定子片(8#)',
machineNo: '8',
},
{
projectId: '115',
projectNo: 'O303',
projectName: '定子段(2#)',
machineNo: '2',
},
{
projectId: '116',
projectNo: 'P286',
projectName: '段子(3#)',
machineNo: '3',
},
{
projectId: '117',
projectNo: 'P286',
projectName: '定子片11',
machineNo: '',
},
],
selection: []
}
},
created() {
this.tableData.map(item => item.isDbClick = false)
},
methods: {
isBlue({
row
}) {
const checkIdList = this.selection.map((item) => item.projectId);
if (checkIdList.includes(row.projectId)) {
return {
backgroundColor: "#e8f4ff",
color: "#409EFF",
};
}
},
dbRowClick(row) {
let list = [];
list.push(row);
if (this.isCheckBox) {
row.isDbClick = !row.isDbClick;
if (row.isDbClick) {
if (!this.selection.includes(row)) this.selection.push(row);
} else {
this.selection.map((item, index) => {
if (item == row) this.selection.splice(index, 1);
})
}
this.$refs.tableRef.toggleRowSelection(row, row.isDbClick);
} else this.$emit('customDbRowClick', list);
},
handleSelectionChange(selection) {
this.selection = selection;
},
submitClick() {
this.$emit('customDbRowClick', this.selection);
this.selection = [];
this.$refs.tableRef.clearSelection();
},
closeClick() {
this.$emit('customCloseClick');
}
}
}
</script>
<style>
.el-table--enable-row-hover .el-table__body tr:hover>td {
background-color: #e8f4ff !important;
}
</style>