index.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322
  1. <template>
  2. <div class="mainContentBox">
  3. <avue-crud
  4. ref="crudRef"
  5. v-model:search="search"
  6. v-model="form"
  7. :data="data"
  8. :option="option"
  9. v-model:page="page"
  10. @row-save="rowSave"
  11. @row-update="updateRow"
  12. @row-del="deleteRow"
  13. @search-change="searchChange"
  14. @search-reset="resetChange"
  15. @size-change="dataList"
  16. @current-change="dataList"
  17. @selection-change="selectionChange"
  18. >
  19. <template #enable="scope">
  20. <el-switch
  21. active-value="1"
  22. inactive-value="0"
  23. inline-prompt
  24. active-text="启用"
  25. inactive-text="禁用"
  26. v-model="scope.row.enable"
  27. @click="changeItem(scope.row)"
  28. class="ml-2"
  29. style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
  30. />
  31. </template>
  32. <template #menu-left="{ size }">
  33. <el-button
  34. :disabled="toDeleteIds.length < 1"
  35. type="danger"
  36. icon="el-icon-delete"
  37. :size="size"
  38. @click="multipleDelete"
  39. >删除</el-button
  40. >
  41. </template>
  42. <template #menu="{ row, index, type }">
  43. <el-button @click="binding(row)" text type="primary"
  44. >设备
  45. <template #icon> <svg-icon icon-class="shebei"></svg-icon> </template
  46. ></el-button>
  47. </template>
  48. </avue-crud>
  49. <el-dialog
  50. v-model="dialog.visible"
  51. :title="dialog.title"
  52. width="900px"
  53. @close="dialog.visible = false"
  54. :destroy-on-close="true"
  55. >
  56. <station-page :stationId="stationDevice.id" />
  57. </el-dialog>
  58. <CommonTable
  59. ref="ctableRef"
  60. tableTitle="员工选择"
  61. tableType="USERS"
  62. @selected-sure="onSelectedFinish"
  63. />
  64. </div>
  65. </template>
  66. <script setup="ts">
  67. import { ref, getCurrentInstance } from "vue";
  68. import { useCrud } from "@/hooks/userCrud";
  69. import ButtonPermKeys from "@/common/configs/buttonPermission";
  70. import { useCommonStoreHook } from "@/store";
  71. import { updateStation } from "@/api/station";
  72. const { isShowTable, tableType } = toRefs(useCommonStoreHook());
  73. import { useDictionaryStore } from "@/store";
  74. const { dicts } = useDictionaryStore();
  75. const test = () => {
  76. isShowTable.value = true;
  77. tableType.value = tableType.value == 1 ? 2 : 1;
  78. };
  79. // 传入一个url,后面不带/
  80. const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  81. useCrud({
  82. src: "/api/v1/base/station",
  83. });
  84. const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  85. Methords; //增删改查
  86. const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
  87. const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
  88. // checkBtnPerm(ButtonPermKeys.PLAN.BTNS.order_add) :permission="permission"
  89. // const permission = reactive({
  90. // delBtn: checkPerm(buttonPermission.PLAN.BTNS.order_del),
  91. // addBtn: checkPerm(buttonPermission.PLAN.BTNS.order_add),
  92. // editBtn: checkPerm(buttonPermission.PLAN.BTNS.order_edit),
  93. // menu: true,
  94. // });
  95. function rowSave(form, done, loading) {
  96. const parts = form.stationIp.split(".");
  97. if (parts.length !== 4) {
  98. ElMessage({
  99. message: "工位ip格式不正确",
  100. type: "error",
  101. });
  102. loading();
  103. return false;
  104. }
  105. for (const part of parts) {
  106. if (isNaN(part) || part < 0 || part > 255) {
  107. ElMessage({
  108. message: "工位ip格式不正确",
  109. type: "error",
  110. });
  111. loading();
  112. return false;
  113. }
  114. }
  115. createRow(form, done, loading);
  116. }
  117. const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  118. onMounted(() => {
  119. // console.log("crudRef", crudRef)
  120. dataList();
  121. });
  122. const ctableRef = ref(null);
  123. /**
  124. * 上传excel相关
  125. */
  126. const uploadRef = ref(null);
  127. const uploadFinished = () => {
  128. // 上传完成后的刷新操作
  129. page.currentPage = 1;
  130. dataList();
  131. };
  132. const importExcelData = () => {
  133. if (uploadRef.value) {
  134. uploadRef.value.show("/api/v1/base/station");
  135. }
  136. };
  137. const dialog = reactive({
  138. title: "设备绑定",
  139. visible: false,
  140. });
  141. const stationDevice = ref(null);
  142. const binding = (row) => {
  143. dialog.visible = true;
  144. stationDevice.value = row;
  145. };
  146. const onSelectedFinish = (selectedValue) => {
  147. form.value.manager = selectedValue.userName;
  148. form.value.managerId = selectedValue.id;
  149. };
  150. const stationUpdate = ref({});
  151. const changeItem = (row) => {
  152. stationUpdate.value.id = row.id;
  153. stationUpdate.value.enable = row.enable;
  154. updateStation(stationUpdate.value).then((data) => {
  155. dataList();
  156. ElMessage({
  157. message: data.msg,
  158. type: "success",
  159. });
  160. });
  161. };
  162. // 设置表格列或者其他自定义的option
  163. option.value = Object.assign(option.value, {
  164. selection: true,
  165. column: [
  166. {
  167. label: "工位编号",
  168. prop: "stationCode",
  169. overHidden: true,
  170. width: 120,
  171. search: true,
  172. rules: [
  173. {
  174. required: true,
  175. message: "请填写工位编号",
  176. trigger: "blur",
  177. },
  178. ],
  179. },
  180. {
  181. label: "工位名称",
  182. width: 120,
  183. prop: "name",
  184. search: true,
  185. overHidden: true,
  186. rules: [
  187. {
  188. required: true,
  189. message: "请填写工位名称",
  190. trigger: "blur",
  191. },
  192. ],
  193. },
  194. {
  195. label: "工位类型",
  196. prop: "stationDictValue",
  197. width: 90,
  198. search: true,
  199. overHidden: true,
  200. rules: [
  201. {
  202. required: true,
  203. message: "请选择工位类型",
  204. trigger: "blur",
  205. },
  206. ],
  207. type: "select",
  208. dicData: dicts.station_type,
  209. searchClearable: false, //可清空的输入框,默认为true
  210. filterable: true, //添加filterable属性即可启用搜索功能
  211. props: {
  212. label: "dictLabel", // 下拉菜单显示的字段
  213. value: "dictValue", // 下拉菜单值的字段
  214. },
  215. },
  216. {
  217. label: "操作方式",
  218. prop: "operateDictValue",
  219. width: 90,
  220. overHidden: true,
  221. rules: [
  222. {
  223. required: true,
  224. message: "操作方式",
  225. trigger: "blur",
  226. },
  227. ],
  228. type: "select",
  229. dicData: dicts.station_operate_type,
  230. props: {
  231. label: "dictLabel", // 下拉菜单显示的字段
  232. value: "dictValue", // 下拉菜单值的字
  233. },
  234. },
  235. {
  236. label: "负责人",
  237. prop: "manager",
  238. overHidden: true,
  239. width: 90,
  240. rules: [
  241. {
  242. required: true,
  243. message: "请选择负责人",
  244. trigger: "blur",
  245. },
  246. ],
  247. click: ({ value, column }) => {
  248. ctableRef.value.startSelect();
  249. },
  250. },
  251. {
  252. label: "负责人id",
  253. prop: "managerId",
  254. hide: true,
  255. display: false,
  256. },
  257. {
  258. label: "所属产线",
  259. prop: "productionLineName",
  260. width: 90,
  261. overHidden: true,
  262. display: false,
  263. },
  264. {
  265. label: "工位地址",
  266. prop: "position",
  267. width: 90,
  268. overHidden: true,
  269. rules: [
  270. {
  271. required: true,
  272. message: "请填写工位地址",
  273. trigger: "blur",
  274. },
  275. ],
  276. },
  277. {
  278. label: "IP地址",
  279. prop: "stationIp",
  280. overHidden: true,
  281. width: 90,
  282. rules: [
  283. {
  284. required: true,
  285. message: "请填写工位IP地址",
  286. trigger: "blur",
  287. },
  288. ],
  289. },
  290. {
  291. label: "启用状态",
  292. slot: true,
  293. headerAlign: "center",
  294. prop: "enable",
  295. width: 100,
  296. display: false,
  297. },
  298. {
  299. label: "工位描述",
  300. width: 90,
  301. overHidden: true,
  302. prop: "remark",
  303. type: "textarea",
  304. span: 24,
  305. },
  306. {
  307. label: "创建人",
  308. prop: "creator",
  309. overHidden: true,
  310. display: false,
  311. },
  312. {
  313. label: "创建时间",
  314. prop: "created",
  315. overHidden: true,
  316. display: false,
  317. },
  318. ],
  319. });
  320. </script>