index.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. <template>
  2. <div class="pageIndexClass">
  3. <div>
  4. <byTable :source="sourceList.data" :pagination="sourceList.pagination" :config="config" :loading="loading" highlight-current-row
  5. :selectConfig="selectConfig" :action-list="[
  6. ]" @get-list="getList">
  7. <template #list="{ item }">
  8. <div style="width:100%">
  9. <span v-for="(product ,index) in item.produceOrderDetailList" style="margin-right:15px">
  10. <el-popover placement="top-start" :width="300" trigger="hover">
  11. <div>
  12. <div>产品编码:{{product.productCode}}</div>
  13. <div>产品名称:{{product.productName}}</div>
  14. <div>产品尺寸:{{product.productLength}}cm*{{product.productWidth}}cm*{{product.productHeight}}cm</div>
  15. </div>
  16. <template #reference>
  17. <el-progress type="circle" :percentage="(Number(product.finishQuantity) / Number(product.quantity))*100" width="60"
  18. :status="(Number(product.finishQuantity) / Number(product.quantity))*100 == 100 ? 'success' : ''" />
  19. </template>
  20. </el-popover>
  21. </span>
  22. </div>
  23. </template>
  24. </byTable>
  25. </div>
  26. <el-dialog :title="modalType == 'add' ? '添加店铺' : '编辑店铺'" v-model="dialogVisible" width="500px" destroy-on-close>
  27. <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="formDom" v-loading="submitLoading">
  28. </byForm>
  29. <template #footer>
  30. <el-button @click="dialogVisible = false" size="defualt">取 消</el-button>
  31. <el-button type="primary" @click="submitForm()" size="defualt" :loading="submitLoading">
  32. 确 定
  33. </el-button>
  34. </template>
  35. </el-dialog>
  36. </div>
  37. </template>
  38. <script setup>
  39. import byTable from "@/components/byTable/index";
  40. import byForm from "@/components/byForm/index";
  41. const { proxy } = getCurrentInstance();
  42. const loading = ref(false);
  43. const submitLoading = ref(false);
  44. const sourceList = ref({
  45. data: [],
  46. pagination: {
  47. total: 3,
  48. pageNum: 1,
  49. pageSize: 10,
  50. keyword: "",
  51. produceStatus: "",
  52. staDeliveryPeriod: "",
  53. endDeliveryPeriod: "",
  54. beginTime: "",
  55. endTime: "",
  56. },
  57. });
  58. const treeData = ref([]);
  59. const dialogVisible = ref(false);
  60. const modalType = ref("add");
  61. const statusData = ref([
  62. {
  63. label: "未开始",
  64. value: "0",
  65. },
  66. {
  67. label: "进行中",
  68. value: "1",
  69. },
  70. {
  71. label: "已完成",
  72. value: "2",
  73. },
  74. ]);
  75. const selectConfig = computed(() => [
  76. {
  77. label: "生产状态",
  78. prop: "produceStatus",
  79. data: statusData.value,
  80. },
  81. {
  82. type: "time",
  83. label: "交期",
  84. placeholder: "开始日期",
  85. prop: "staDeliveryPeriod",
  86. placeholderOne: "结束日期",
  87. propOne: "endDeliveryPeriod",
  88. },
  89. {
  90. type: "time",
  91. label: "下单日期",
  92. placeholder: "开始日期",
  93. prop: "beginTime",
  94. placeholderOne: "结束日期",
  95. propOne: "endTime",
  96. },
  97. ]);
  98. const config = computed(() => {
  99. return [
  100. {
  101. attrs: {
  102. label: "订单号",
  103. prop: "code",
  104. width: 150,
  105. },
  106. },
  107. {
  108. attrs: {
  109. label: "下单时间",
  110. prop: "createTime",
  111. width: 160,
  112. },
  113. },
  114. {
  115. attrs: {
  116. label: "交期",
  117. prop: "deliveryPeriod",
  118. width: 160,
  119. },
  120. },
  121. {
  122. attrs: {
  123. label: "生产状态",
  124. prop: "produceStatus",
  125. width: 120,
  126. },
  127. render(val) {
  128. return proxy.dictValueLabel(val, statusData.value);
  129. },
  130. },
  131. {
  132. attrs: {
  133. slot: "list",
  134. label: "产品生产进度",
  135. // prop: "name",
  136. },
  137. },
  138. {
  139. attrs: {
  140. label: "操作",
  141. width: "100",
  142. align: "center",
  143. fixed: "right",
  144. },
  145. renderHTML(row) {
  146. return [
  147. row.produceTime
  148. ? {}
  149. : {
  150. attrs: {
  151. label: "投产",
  152. type: "primary",
  153. text: true,
  154. },
  155. el: "button",
  156. click() {
  157. proxy
  158. .msgConfirm()
  159. .then((res) => {
  160. proxy
  161. .post("/produceOrder/putProduction", {
  162. id: row.id,
  163. })
  164. .then((res) => {
  165. proxy.msgTip("操作成功", 1);
  166. getList();
  167. });
  168. })
  169. .catch((err) => {});
  170. },
  171. },
  172. ];
  173. },
  174. },
  175. ];
  176. });
  177. const formData = reactive({
  178. data: {},
  179. });
  180. const formOption = reactive({
  181. inline: true,
  182. labelWidth: 100,
  183. itemWidth: 100,
  184. });
  185. const formDom = ref(null);
  186. const formConfig = computed(() => {
  187. return [
  188. {
  189. type: "input",
  190. prop: "code",
  191. label: "店铺编号",
  192. itemWidth: 100,
  193. disabled: false,
  194. },
  195. {
  196. type: "input",
  197. prop: "name",
  198. label: "店铺名称",
  199. itemWidth: 100,
  200. disabled: false,
  201. },
  202. {
  203. type: "treeSelect",
  204. prop: "deptId",
  205. label: "负责部门",
  206. data: treeData.value,
  207. propsTreeLabel: "deptName",
  208. propsTreeValue: "deptId",
  209. itemWidth: 100,
  210. disabled: false,
  211. },
  212. ];
  213. });
  214. const rules = ref({
  215. deptId: [{ required: true, message: "请选择负责部门", trigger: "change" }],
  216. name: [{ required: true, message: "请输入店铺名称", trigger: "blur" }],
  217. code: [{ required: true, message: "请输入店铺编号", trigger: "blur" }],
  218. });
  219. const getList = async (req) => {
  220. sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  221. loading.value = true;
  222. proxy.post("/produceOrder/page", sourceList.value.pagination).then((res) => {
  223. sourceList.value.data = res.rows;
  224. sourceList.value.pagination.total = res.total;
  225. setTimeout(() => {
  226. loading.value = false;
  227. }, 200);
  228. });
  229. };
  230. const openModal = () => {
  231. dialogVisible.value = true;
  232. modalType.value = "add";
  233. formData.data = {
  234. definition: "2",
  235. fileList: [],
  236. };
  237. if (currencyData.value && currencyData.value.length > 0) {
  238. formData.data.currency = currencyData.value[0].dictKey;
  239. formData.data.costCurrency = currencyData.value[0].dictKey;
  240. }
  241. };
  242. const submitForm = () => {
  243. formDom.value.handleSubmit((valid) => {
  244. submitLoading.value = true;
  245. proxy.post("/shopInfo/" + modalType.value, formData.data).then(
  246. (res) => {
  247. proxy.msgTip("操作成功", 1);
  248. dialogVisible.value = false;
  249. submitLoading.value = false;
  250. getList();
  251. },
  252. (err) => {
  253. submitLoading.value = false;
  254. }
  255. );
  256. });
  257. };
  258. const getDtl = (row) => {
  259. modalType.value = "edit";
  260. proxy.post("/shopInfo/detail", { id: row.id }).then((res) => {
  261. formData.data = res;
  262. dialogVisible.value = true;
  263. });
  264. };
  265. getList();
  266. </script>
  267. <style lang="scss" scoped>
  268. ::v-deep(.el-progress__text) {
  269. font-size: 14px !important;
  270. }
  271. .content {
  272. padding: 20px;
  273. }
  274. </style>