123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232 |
- <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>
|