懒羊羊
2024-01-31 e57a8990ae56f657a59c435a0613c5f7a8728003
提交 | 用户 | 时间
e57a89 1 <template>
2   <el-dialog title="物料产品选择"
3     v-if="showFlag"
4     :visible.sync="showFlag"
5     :modal= false
6     width="80%"
7     center
8   >
9     <el-row :gutter="20">
10       <!--分类数据-->
11       <el-col :span="4" :xs="24">
12         <div class="head-container">
13           <el-input
14             v-model="itemTypeName"
15             placeholder="请输入分类名称"
16             clearable
17             size="small"
18             prefix-icon="el-icon-search"
19             style="margin-bottom: 20px"
20           />
21         </div>
22         <div class="head-container">
23           <el-tree
24             :data="itemTypeOptions"
25             :props="defaultProps"
26             :expand-on-click-node="false"
27             :filter-node-method="filterNode"
28             ref="tree"
29             default-expand-all
30             @node-click="handleNodeClick"
31           />
32         </div>
33       </el-col>
34       <!--物料数据-->
35       <el-col :span="20" :xs="24">
36         <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
37           <el-form-item label="物料编码" prop="itemCode">
38             <el-input
39               v-model="queryParams.itemCode"
40               placeholder="请输入物料编码"
41               clearable
42               style="width: 240px"
43               @keyup.enter.native="handleQuery"
44             />
45           </el-form-item>
46           <el-form-item label="物料名称" prop="itemName">
47             <el-input
48               v-model="queryParams.itemName"
49               placeholder="请输入物料名称"
50               clearable
51               style="width: 240px"
52               @keyup.enter.native="handleQuery"
53             />
54           </el-form-item>
55           <el-form-item>
56             <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
57             <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
58           </el-form-item>
59         </el-form>
60         <el-table v-loading="loading" :data="itemList" @selection-change="handleSelectionChange">
61           <el-table-column type="selection" width="50" align="center" />
62           <el-table-column label="物料编码" width = "120" align="center" key="itemCode" prop="itemCode" v-if="columns[0].visible" >
63           </el-table-column>
64           <el-table-column label="物料名称" min-width="120" align="left" key="itemName" prop="itemName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
65           <el-table-column label="规格型号" align="left" key="specification" prop="specification" v-if="columns[2].visible" :show-overflow-tooltip="true" />
66           <el-table-column label="单位" align="center" key="unitOfMeasure" prop="unitOfMeasure" v-if="columns[3].visible" :show-overflow-tooltip="true" />
67           <el-table-column label="物料/产品" align="center" key="itemOrProduct" prop="itemOrProduct" v-if="columns[4].visible" :show-overflow-tooltip="true" >
68             <template slot-scope="scope">
69               <dict-tag :options="dict.type.mes_item_product" :value="scope.row.itemOrProduct"/>
70             </template>
71           </el-table-column>
72           <el-table-column label="所属分类" align="center" key="itemTypeName" prop="itemTypeName" v-if="columns[5].visible" width="120" />
73           <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
74             <template slot-scope="scope">
75               <span>{{ parseTime(scope.row.createTime) }}</span>
76             </template>
77           </el-table-column>
78         </el-table>
79
80         <pagination
81           v-show="total>0"
82           :total="total"
83           :page.sync="queryParams.pageNum"
84           :limit.sync="queryParams.pageSize"
85           @pagination="getList"
86         />
87       </el-col>
88     </el-row>
89     <div slot="footer" class="dialog-footer">
90         <el-button type="primary" @click="confirmSelect">确 定</el-button>
91         <el-button @click="showFlag=false">取 消</el-button>
92     </div>
93   </el-dialog>
94 </template>
95
96 <script>
97 import { listMdItem, getMdItem, delMdItem, addMdItem, updateMdItem} from "@/api/mes/md/mdItem";
98 import { listAllUnitmeasure} from "@/api/mes/md/unitmeasure";
99 import {genCode} from "@/api/system/autocode/rule"
100 import { getToken } from "@/utils/auth";
101 import { treeselect } from "@/api/mes/md/itemtype";
102 import Treeselect from "@riophae/vue-treeselect";
103 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
104
105 export default {
106   name: "MdItemSelect",
107   dicts: ['sys_yes_no','mes_item_product'],
108   components: { Treeselect },
109   data() {
110     return {
111       showFlag:false,
112
113       // 选中数组
114       ids: [],
115       selectedRows: [],
116       // 非单个禁用
117       single: true,
118       // 非多个禁用
119       multiple: true,
120       // 显示搜索条件
121       showSearch: true,
122       // 总条数
123       total: 0,
124       // 物料产品表格数据
125       itemList: null,
126       // 部门树选项
127       itemTypeOptions: undefined,
128       // 部门名称
129       itemTypeName: undefined,
130       defaultProps: {
131         children: "children",
132         label: "label"
133       },
134       // 查询参数
135       queryParams: {
136         pageNum: 1,
137         pageSize: 10,
138         itemCode: undefined,
139         itemName: undefined,
140         itemTypeId: 0
141       },
142       // 列信息
143       columns: [
144         { key: 0, label: `物料/产品编码`, visible: true },
145         { key: 1, label: `物料/产品名称`, visible: true },
146         { key: 2, label: `规格型号`, visible: true },
147         { key: 3, label: `单位`, visible: true },
148         { key: 4, label: `物料/产品`, visible: true },
149         { key: 5, label: `物料分类`, visible: true },
150         { key: 6, label: `创建时间`, visible: true }
151       ]
152     };
153   },
154   watch: {
155     // 根据名称筛选分类树
156     itemTypeName(val) {
157       this.$refs.tree.filter(val);
158     }
159   },
160   created() {
161     this.getList();
162     this.getTreeselect();
163   },
164   methods: {
165     /** 查询物料编码列表 */
166     getList() {
167       this.loading = true;
168       listMdItem(this.queryParams).then(response => {
169           this.itemList = response.rows;
170           this.total = response.total;
171           this.loading = false;
172         }
173       );
174     },
175     /** 查询分类下拉树结构 */
176     getTreeselect() {
177       treeselect().then(response => {
178         this.itemTypeOptions = response.data;
179       });
180     },
181     // 筛选节点
182     filterNode(value, data) {
183       if (!value) return true;
184       return data.label.indexOf(value) !== -1;
185     },
186     // 节点单击事件
187     handleNodeClick(data) {
188       this.queryParams.itemTypeId = data.id;
189       this.handleQuery();
190     },
191     /** 搜索按钮操作 */
192     handleQuery() {
193       this.queryParams.pageNum = 1;
194       this.getList();
195     },
196     /** 重置按钮操作 */
197     resetQuery() {
198       this.resetForm("queryForm");
199       this.handleQuery();
200     },
201     // 多选框选中数据
202     handleSelectionChange(selection) {
203       this.ids = selection.map(item => item.itemId);
204       this.single = selection.length != 1;
205       this.multiple = !selection.length;
206       this.selectedRows = selection;
207     },
208     //确定选中
209     confirmSelect(){
210         if(this.ids ==[] || this.ids.length==0){
211             this.$notify({
212                 title:'提示',
213                 type:'warning',
214                 message: '请至少选择一条数据!'
215             });
216             return;
217         }
218         this.$emit('onSelected',this.selectedRows);
219         this.showFlag = false;
220     }
221   }
222 };
223 </script>