<script> import { manualBindQuery, classifyTree, manualBindOK, } from "@/api/material/label"; export default { name: "HandBindDialog", data() { const initDict = { labelType: [ { label: "类别", value: 1 }, { label: "标签", value: 2 }, ], parentId: [], }; const initColumns = () => [ { type: "text", prop: "orgId", label: "使用组织", required: true, showOverflowTooltip: true, }, { type: "text", prop: "code", label: "物料编码", required: true, showOverflowTooltip: true, }, { type: "text", prop: "name", label: "物料名称", required: true, showOverflowTooltip: true, }, { type: "text", prop: "id", label: "物料分类", required: false, showOverflowTooltip: true, }, { type: "text", prop: "isEnable", label: "物料状态", required: false, showOverflowTooltip: true, }, { type: "text", prop: "createTime", label: "创建时间", required: false, showOverflowTooltip: true, }, { type: "text", prop: "bindTime", label: "绑定时间", required: false, showOverflowTooltip: true, }, ]; const initForm = () => { let form = {}; initColumns().forEach((item) => (form[item.prop] = "")); return form; }; return { loading: false, dialogFormVisible: false, form: initForm(), columns: initColumns(), tableData: [], page: { pageNum: 1, pageSize: 25, total: 0 }, dict: initDict, options: [], multipleSelection: [], }; }, methods: { handleSelectionChange(val) { this.multipleSelection = val; }, async fetchList(prop) { this.loading = true; await manualBindQuery(prop) .then((res) => { this.tableData = res; }) .finally(() => { this.loading = false; }); }, async fetchItem(prop) { this.dialogFormVisible = true; this.form = { ...this.form, ...prop }; this.fetchClassifyTree(); // await this.fetchList({ classifyid: prop.id }); }, async fetchClassifyTree() { let data = await classifyTree(); this.options = data; }, onSearch(prop) { const classifyid = prop.classifyid || ""; const code = prop.code ? prop.code[prop.code.length - 1] : ""; this.fetchList({ code, classifyid }); }, onClose() { this.$parent.$children .find((el) => el.$vnode.tag.indexOf("BindDialog") > -1) .fetchItem({}); }, onSubmit(formName) { this.$refs[formName].validate((valid) => { if (valid) { this.loading = true; const labelId = this.form.id; const material = this.multipleSelection.map((item) => ({ ...item, materialId: item.id, })); manualBindOK({ labelId, material }) .then((res) => { let { code } = res; if (code === 200) { this.dialogFormVisible = false; this.$message.success("success"); this.form = {}; } }) .finally(() => { this.loading = false; }); } else { console.log("error submit!!"); return false; } }); }, }, created() {}, }; </script> <template> <el-dialog title="手动绑定" :visible.sync="dialogFormVisible" append-to-body @close="onClose" > <el-form ref="form" :model="form" label-width="80px"> <el-row :gutter="20"> <el-col :span="8"> <el-form-item label="物料分类"> <el-cascader v-model="form.code" :options="options" :show-all-levels="false" :props="{ checkStrictly: true, value: 'code', label: 'materialType', children: 'childrens', }" clearable style="width: 100%" ></el-cascader> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="物料编码"> <el-input v-model="form.classifyid"></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-button :disabled="loading" @click="onSearch(form)"> 搜索 </el-button> </el-col> <el-col :span="24"> <el-table v-loading="loading" lazy border row-key="id" :data="tableData" @selection-change="handleSelectionChange" style="margin-top: 16px" > <el-table-column type="selection" width="55"> </el-table-column> <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label" :show-overflow-tooltip="column.showOverflowTooltip" > </el-table-column> <!-- <el-table-column fixed="right" label="操作" width="225"> <template slot-scope="scope"> <el-button @click.native.prevent="onUnbind(scope.row)" size="small" > 解绑 </el-button> </template> </el-table-column> --> </el-table> </el-col> </el-row> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="onSubmit('form')">立即创建</el-button> <el-button @click="dialogFormVisible = false">取消</el-button> </div> </el-dialog> </template> <style scoped></style>