label-hand-bind-dialog.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. <script>
  2. import {
  3. manualBindQuery,
  4. classifyTree,
  5. manualBindOK,
  6. } from "@/api/material/label";
  7. export default {
  8. name: "HandBindDialog",
  9. data() {
  10. const initDict = {
  11. labelType: [
  12. { label: "类别", value: 1 },
  13. { label: "标签", value: 2 },
  14. ],
  15. parentId: [],
  16. };
  17. const initColumns = () => [
  18. {
  19. type: "text",
  20. prop: "orgId",
  21. label: "使用组织",
  22. required: true,
  23. showOverflowTooltip: true,
  24. },
  25. {
  26. type: "text",
  27. prop: "code",
  28. label: "物料编码",
  29. required: true,
  30. showOverflowTooltip: true,
  31. },
  32. {
  33. type: "text",
  34. prop: "name",
  35. label: "物料名称",
  36. required: true,
  37. showOverflowTooltip: true,
  38. },
  39. {
  40. type: "text",
  41. prop: "id",
  42. label: "物料分类",
  43. required: false,
  44. showOverflowTooltip: true,
  45. },
  46. {
  47. type: "text",
  48. prop: "isEnable",
  49. label: "物料状态",
  50. required: false,
  51. showOverflowTooltip: true,
  52. },
  53. {
  54. type: "text",
  55. prop: "createTime",
  56. label: "创建时间",
  57. required: false,
  58. showOverflowTooltip: true,
  59. },
  60. {
  61. type: "text",
  62. prop: "bindTime",
  63. label: "绑定时间",
  64. required: false,
  65. showOverflowTooltip: true,
  66. },
  67. ];
  68. const initForm = () => {
  69. let form = {};
  70. initColumns().forEach((item) => (form[item.prop] = ""));
  71. return form;
  72. };
  73. return {
  74. loading: false,
  75. dialogFormVisible: false,
  76. form: initForm(),
  77. columns: initColumns(),
  78. tableData: [],
  79. page: { pageNum: 1, pageSize: 25, total: 0 },
  80. dict: initDict,
  81. options: [],
  82. multipleSelection: [],
  83. };
  84. },
  85. methods: {
  86. handleSelectionChange(val) {
  87. this.multipleSelection = val;
  88. },
  89. async fetchList(prop) {
  90. this.loading = true;
  91. await manualBindQuery(prop)
  92. .then((res) => {
  93. this.tableData = res;
  94. })
  95. .finally(() => {
  96. this.loading = false;
  97. });
  98. },
  99. async fetchItem(prop) {
  100. this.dialogFormVisible = true;
  101. this.form = { ...this.form, ...prop };
  102. this.fetchClassifyTree();
  103. // await this.fetchList({ classifyid: prop.id });
  104. },
  105. async fetchClassifyTree() {
  106. let data = await classifyTree();
  107. this.options = data;
  108. },
  109. onSearch(prop) {
  110. const classifyid = prop.classifyid || "";
  111. const code = prop.code ? prop.code[prop.code.length - 1] : "";
  112. this.fetchList({ code, classifyid });
  113. },
  114. onClose() {
  115. this.$parent.$children
  116. .find((el) => el.$vnode.tag.indexOf("BindDialog") > -1)
  117. .fetchItem({});
  118. },
  119. onSubmit(formName) {
  120. this.$refs[formName].validate((valid) => {
  121. if (valid) {
  122. this.loading = true;
  123. const labelId = this.form.id;
  124. const material = this.multipleSelection.map((item) => ({
  125. ...item,
  126. materialId: item.id,
  127. }));
  128. manualBindOK({ labelId, material })
  129. .then((res) => {
  130. let { code } = res;
  131. if (code === 200) {
  132. this.dialogFormVisible = false;
  133. this.$message.success("success");
  134. this.form = {};
  135. }
  136. })
  137. .finally(() => {
  138. this.loading = false;
  139. });
  140. } else {
  141. console.log("error submit!!");
  142. return false;
  143. }
  144. });
  145. },
  146. },
  147. created() {},
  148. };
  149. </script>
  150. <template>
  151. <el-dialog
  152. title="手动绑定"
  153. :visible.sync="dialogFormVisible"
  154. append-to-body
  155. @close="onClose"
  156. >
  157. <el-form ref="form" :model="form" label-width="80px">
  158. <el-row :gutter="20">
  159. <el-col :span="8">
  160. <el-form-item label="物料分类">
  161. <el-cascader
  162. v-model="form.code"
  163. :options="options"
  164. :show-all-levels="false"
  165. :props="{
  166. checkStrictly: true,
  167. value: 'code',
  168. label: 'materialType',
  169. children: 'childrens',
  170. }"
  171. clearable
  172. style="width: 100%"
  173. ></el-cascader>
  174. </el-form-item>
  175. </el-col>
  176. <el-col :span="8">
  177. <el-form-item label="物料编码">
  178. <el-input v-model="form.classifyid"></el-input>
  179. </el-form-item>
  180. </el-col>
  181. <el-col :span="8">
  182. <el-button :disabled="loading" @click="onSearch(form)">
  183. 搜索
  184. </el-button>
  185. </el-col>
  186. <el-col :span="24">
  187. <el-table
  188. v-loading="loading"
  189. lazy
  190. border
  191. row-key="id"
  192. :data="tableData"
  193. @selection-change="handleSelectionChange"
  194. style="margin-top: 16px"
  195. >
  196. <el-table-column type="selection" width="55"> </el-table-column>
  197. <el-table-column
  198. v-for="column in columns"
  199. :key="column.prop"
  200. :prop="column.prop"
  201. :label="column.label"
  202. :show-overflow-tooltip="column.showOverflowTooltip"
  203. >
  204. </el-table-column>
  205. <!-- <el-table-column fixed="right" label="操作" width="225">
  206. <template slot-scope="scope">
  207. <el-button
  208. @click.native.prevent="onUnbind(scope.row)"
  209. size="small"
  210. >
  211. 解绑
  212. </el-button>
  213. </template>
  214. </el-table-column> -->
  215. </el-table>
  216. </el-col>
  217. </el-row>
  218. </el-form>
  219. <div slot="footer" class="dialog-footer">
  220. <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
  221. <el-button @click="dialogFormVisible = false">取消</el-button>
  222. </div>
  223. </el-dialog>
  224. </template>
  225. <style scoped></style>