index.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
  1. <template>
  2. <div class="pageIndexClass">
  3. <!-- <Banner /> -->
  4. <div class="content">
  5. <byTable :source="sourceList.data" :pagination="sourceList.pagination" :config="config" :loading="loading" highlight-current-row
  6. :selectConfig="selectConfig" :table-events="{
  7. //element talbe事件都能传
  8. select: select,
  9. }" :action-list="[
  10. {
  11. text: '添加产线',
  12. action: () => openModal('add'),
  13. },
  14. ]" @get-list="getList">
  15. <template #slotName="{ item }">
  16. {{ item.createTime }}
  17. </template>
  18. </byTable>
  19. </div>
  20. <el-dialog :title="modalType == 'add' ? '添加产线' : '编辑'" v-model="dialogVisible" width="800" v-loading="loading">
  21. <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="byform">
  22. </byForm>
  23. <template #footer>
  24. <el-button @click="dialogVisible = false" size="default">取 消</el-button>
  25. <el-button type="primary" @click="submitForm('byform')" size="default" :loading="submitLoading">
  26. 确 定
  27. </el-button>
  28. </template>
  29. </el-dialog>
  30. </div>
  31. </template>
  32. <script setup>
  33. /* eslint-disable vue/no-unused-components */
  34. import { ElMessage, ElMessageBox } from "element-plus";
  35. import byTable from "@/components/byTable/index";
  36. import byForm from "@/components/byForm/index";
  37. import { computed, defineComponent, ref } from "vue";
  38. const loading = ref(false);
  39. const submitLoading = ref(false);
  40. const sourceList = ref({
  41. data: [],
  42. pagination: {
  43. total: 3,
  44. pageNum: 1,
  45. pageSize: 10,
  46. },
  47. });
  48. let dialogVisible = ref(false);
  49. let roomDialogVisible = ref(false);
  50. let modalType = ref("add");
  51. let rules = ref({
  52. workshopId: [
  53. { required: true, message: "请选择车间名称", trigger: "change" },
  54. ],
  55. type: [{ required: true, message: "请选择产线类型", trigger: "change" }],
  56. name: [{ required: true, message: "请输入产线名称", trigger: "blur" }],
  57. });
  58. const { proxy } = getCurrentInstance();
  59. const selectConfig = reactive([
  60. {
  61. label: "车间",
  62. prop: "workshopId",
  63. data: [],
  64. },
  65. {
  66. label: "产线类型",
  67. prop: "type",
  68. data: [
  69. {
  70. label: "普通产线",
  71. value: "1",
  72. },
  73. {
  74. label: "半自动化产线",
  75. value: "2",
  76. },
  77. {
  78. label: "自动化产线",
  79. value: "3",
  80. },
  81. ],
  82. },
  83. ]);
  84. const config = computed(() => {
  85. return [
  86. {
  87. attrs: {
  88. label: "车间名称",
  89. prop: "workshopName",
  90. width: 120,
  91. },
  92. },
  93. {
  94. attrs: {
  95. label: "产线类型",
  96. prop: "type",
  97. width: 150,
  98. },
  99. render(type) {
  100. return type == 1
  101. ? "普通产线"
  102. : type == 2
  103. ? "半自动化产线"
  104. : type == "3"
  105. ? "自动化产线"
  106. : "";
  107. },
  108. },
  109. {
  110. attrs: {
  111. label: "产线名称",
  112. prop: "name",
  113. width: 150,
  114. },
  115. },
  116. {
  117. attrs: {
  118. label: "负责人",
  119. prop: "personLiableName",
  120. width: 100,
  121. },
  122. },
  123. {
  124. attrs: {
  125. label: "产线说明",
  126. prop: "remarks",
  127. },
  128. },
  129. {
  130. attrs: {
  131. label: "操作",
  132. width: "200",
  133. align: "right",
  134. },
  135. // 渲染 el-button,一般用在最后一列。
  136. renderHTML(row) {
  137. return [
  138. {
  139. attrs: {
  140. label: "修改",
  141. type: "primary",
  142. text: true,
  143. },
  144. el: "button",
  145. click() {
  146. getDtl(row);
  147. },
  148. },
  149. {
  150. attrs: {
  151. label: "删除",
  152. type: "danger",
  153. text: true,
  154. },
  155. el: "button",
  156. click() {
  157. // 弹窗提示是否删除
  158. ElMessageBox.confirm(
  159. "此操作将永久删除该数据, 是否继续?",
  160. "提示",
  161. {
  162. confirmButtonText: "确定",
  163. cancelButtonText: "取消",
  164. type: "warning",
  165. }
  166. ).then(() => {
  167. // 删除
  168. proxy
  169. .post("/assemblyLine/delete", {
  170. id: row.id,
  171. })
  172. .then((res) => {
  173. ElMessage({
  174. message: "删除成功",
  175. type: "success",
  176. });
  177. getList();
  178. });
  179. });
  180. },
  181. },
  182. ];
  183. },
  184. },
  185. ];
  186. });
  187. let formData = reactive({
  188. data: {},
  189. });
  190. const formOption = reactive({
  191. inline: true,
  192. labelWidth: 100,
  193. itemWidth: 100,
  194. rules: [],
  195. });
  196. const byform = ref(null);
  197. const treeData = ref([]);
  198. const formConfig = computed(() => {
  199. return [
  200. {
  201. type: "select",
  202. prop: "workshopId",
  203. label: "车间名称",
  204. required: true,
  205. isLoad: {
  206. url: "/workshop/page",
  207. req: {
  208. pageNum: 1,
  209. pageSize: 9999,
  210. },
  211. labelKey: "name",
  212. labelVal: "id",
  213. method: "post",
  214. resUrl: "rows",
  215. },
  216. },
  217. {
  218. type: "select",
  219. prop: "type",
  220. label: "产线类型",
  221. required: true,
  222. data: [
  223. {
  224. label: "普通产线",
  225. value: "1",
  226. },
  227. {
  228. label: "半自动化产线",
  229. value: "2",
  230. },
  231. {
  232. label: "自动化产线",
  233. value: "3",
  234. },
  235. ],
  236. },
  237. {
  238. type: "input",
  239. prop: "name",
  240. label: "产线名称",
  241. required: true,
  242. },
  243. {
  244. type: "select",
  245. prop: "personLiableId",
  246. label: "负责人",
  247. isLoad: {
  248. url: "/system/user/list?pageNum=1&pageSize=10000",
  249. labelKey: "userName",
  250. labelVal: "userId",
  251. method: "get",
  252. resUrl: "rows",
  253. },
  254. },
  255. {
  256. type: "input",
  257. prop: "remarks",
  258. label: "产线说明",
  259. itemType: "textarea",
  260. },
  261. ];
  262. });
  263. const getList = async (req) => {
  264. sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  265. loading.value = true;
  266. proxy
  267. .post("/assemblyLine/page", sourceList.value.pagination)
  268. .then((message) => {
  269. console.log(message);
  270. sourceList.value.data = message.rows;
  271. sourceList.value.pagination.total = message.total;
  272. setTimeout(() => {
  273. loading.value = false;
  274. }, 200);
  275. });
  276. };
  277. const openModal = () => {
  278. dialogVisible.value = true;
  279. modalType.value = "add";
  280. formData.data = {};
  281. console.log(formData.data, "awss");
  282. };
  283. const submitForm = () => {
  284. console.log(byform.value);
  285. byform.value.handleSubmit((valid) => {
  286. submitLoading.value = true;
  287. proxy.post("/assemblyLine/" + modalType.value, formData.data).then(
  288. (res) => {
  289. ElMessage({
  290. message: modalType.value == "add" ? "添加成功" : "编辑成功",
  291. type: "success",
  292. });
  293. dialogVisible.value = false;
  294. submitLoading.value = false;
  295. getList();
  296. },
  297. (err) => (submitLoading.value = false)
  298. );
  299. });
  300. };
  301. const getDtl = (row) => {
  302. modalType.value = "edit";
  303. proxy.post("/assemblyLine/detail", { id: row.id }).then((res) => {
  304. res.type = res.type + "";
  305. formData.data = res;
  306. console.log(formData);
  307. dialogVisible.value = true;
  308. });
  309. };
  310. const selectData = reactive({
  311. farmList: [],
  312. });
  313. const getSelect = () => {
  314. proxy
  315. .post("/workshop/page", { pageNum: 1, pageSize: 9999 })
  316. .then((message) => {
  317. selectData.farmList = message.rows;
  318. selectConfig[0].data = selectData.farmList.map((x) => ({
  319. label: x.name,
  320. value: x.id,
  321. }));
  322. });
  323. };
  324. getList();
  325. getSelect();
  326. </script>
  327. <style lang="scss" scoped>
  328. .tenant {
  329. padding: 20px;
  330. }
  331. </style>