index.tsx 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. import { ref, reactive, computed, toRefs } from "vue";
  2. import { Table } from "@/hooks/interface";
  3. import { ColumnProps } from "@/components/LjVxeTable/interface";
  4. import { ALLOW_EDIT_STATE } from "@/config/index";
  5. import { SaveMattressExtra, DeleteMattressExtra } from "@/api/modules/basicinfo";
  6. import { ElMessage, ElMessageBox } from "element-plus";
  7. import { numCheck } from "@/utils/rules/index";
  8. import { isArray } from "@/utils/is";
  9. interface defaultState {
  10. /**
  11. * @description 单据当前状态
  12. */
  13. orderStatus: string;
  14. /**
  15. * @description 列表Ref
  16. */
  17. VxeTableRef: any;
  18. /**
  19. * @description 详情页Ref
  20. */
  21. LjDetailRef: any;
  22. /**
  23. * @description 是否有包边
  24. */
  25. ifEdge: boolean;
  26. }
  27. const state = reactive<defaultState>({
  28. orderStatus: "",
  29. VxeTableRef: null,
  30. LjDetailRef: null,
  31. ifEdge: false
  32. });
  33. /**
  34. * @description 表格多选数据操作
  35. * @param {String} rowKey 当表格可以多选时,所指定的 id
  36. * */
  37. export const useHooks = (t?: any) => {
  38. // 表格配置项
  39. const columns: ColumnProps<any>[] = [
  40. { type: "checkbox", width: 80, fixed: "left" },
  41. // {
  42. // field: "areaname",
  43. // title: "分区名称",
  44. // basicinfo: {
  45. // el: "input",
  46. // span: 4,
  47. // editable: ALLOW_EDIT_STATE
  48. // }
  49. // },
  50. {
  51. field: "extraid",
  52. title: "项目类型",
  53. basicinfo: {
  54. el: "select",
  55. span: 4,
  56. editable: ALLOW_EDIT_STATE,
  57. rules: [{ required: true, message: "请输入项目类型", trigger: "blur" }]
  58. }
  59. },
  60. {
  61. field: "extramxname",
  62. title: "项目名称",
  63. basicinfo: {
  64. el: "input",
  65. span: 4,
  66. editable: ALLOW_EDIT_STATE
  67. }
  68. },
  69. {
  70. field: "price",
  71. title: "金额",
  72. basicinfo: {
  73. el: "input",
  74. props: {
  75. type: "number"
  76. },
  77. span: 4,
  78. editable: ALLOW_EDIT_STATE
  79. }
  80. },
  81. {
  82. field: "qty",
  83. title: "数量",
  84. basicinfo: {
  85. el: "input",
  86. props: {
  87. type: "number"
  88. },
  89. span: 4,
  90. editable: ALLOW_EDIT_STATE
  91. }
  92. },
  93. {
  94. field: "dscrp",
  95. title: "备注",
  96. basicinfo: {
  97. el: "input",
  98. span: 4,
  99. editable: ALLOW_EDIT_STATE
  100. }
  101. },
  102. {
  103. field: "inuse",
  104. title: "禁用",
  105. basicinfo: {
  106. el: "checkbox",
  107. span: 1,
  108. editable: ALLOW_EDIT_STATE
  109. }
  110. },
  111. {
  112. field: "inputtype",
  113. title: "录入类型",
  114. enum: [
  115. {
  116. label: "选择",
  117. value: 0
  118. },
  119. {
  120. label: "录入",
  121. value: 1
  122. },
  123. {
  124. label: "带出",
  125. value: 2
  126. },
  127. {
  128. label: "选择物料",
  129. value: 3
  130. }
  131. ],
  132. basicinfo: {
  133. el: "select",
  134. span: 1,
  135. editable: ALLOW_EDIT_STATE
  136. }
  137. },
  138. {
  139. field: "ifinit",
  140. title: "自动导入",
  141. basicinfo: {
  142. el: "checkbox",
  143. span: 1,
  144. editable: ALLOW_EDIT_STATE
  145. }
  146. }
  147. ];
  148. // 保存
  149. const fSave = (param: any) => {
  150. return new Promise((resolve, reject) => {
  151. ElMessageBox.confirm("是否确定要保存吗?", "询问", {
  152. confirmButtonText: "是",
  153. cancelButtonText: "否",
  154. type: "warning"
  155. })
  156. .then(() => {
  157. SaveMattressExtra(param).then(() => {
  158. ElMessage.success("保存成功!");
  159. state.VxeTableRef?.refresh();
  160. resolve({});
  161. });
  162. })
  163. .catch(() => {
  164. ElMessage({
  165. type: "info",
  166. message: "操作取消"
  167. });
  168. });
  169. });
  170. };
  171. // 删除
  172. const fDelete = (data?: any) => {
  173. console.log("fDelete data :>> ", data);
  174. let delArr = [];
  175. if (isArray(data) && data.length > 0) {
  176. delArr = data.map((item: any) => {
  177. return { extramxid: parseInt(item.extramxid) };
  178. });
  179. } else {
  180. const checkDate = state.VxeTableRef?.element.getCheckboxRecords();
  181. if (checkDate.length === 0) {
  182. ElMessage.error("请选择要删除的数据!");
  183. return;
  184. }
  185. delArr = checkDate.map((item: any) => {
  186. return { extramxid: parseInt(item.extramxid) };
  187. });
  188. }
  189. ElMessageBox.confirm("是否确定要删除吗?", "询问", {
  190. confirmButtonText: "是",
  191. cancelButtonText: "否",
  192. type: "warning"
  193. })
  194. .then(() => {
  195. DeleteMattressExtra({ list: delArr }).then(() => {
  196. ElMessage.success("删除成功!");
  197. state.VxeTableRef?.refresh();
  198. });
  199. })
  200. .catch(() => {
  201. ElMessage({
  202. type: "info",
  203. message: "操作取消"
  204. });
  205. });
  206. };
  207. return {
  208. ...toRefs(state),
  209. columns,
  210. fSave,
  211. fDelete
  212. };
  213. };