index.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362
  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. tdaProductId: [
  53. { required: true, message: "请选择行业名称", trigger: ["blur", "change"] },
  54. ],
  55. productId: [
  56. { required: true, message: "请选择产品名称", trigger: ["blur", "change"] },
  57. ],
  58. deviceName: [
  59. { required: true, message: "请输入设备名称", trigger: ["blur", "change"] },
  60. ],
  61. nodeId: [
  62. { required: true, message: "请输入设备标识", trigger: ["blur", "change"] },
  63. ],
  64. secret: [
  65. { required: true, message: "请输入密钥", trigger: ["blur", "change"] },
  66. ],
  67. });
  68. const { proxy } = getCurrentInstance();
  69. const selectConfig = reactive([
  70. {
  71. label: "行业名称",
  72. prop: "flowStatus",
  73. data: [],
  74. },
  75. {
  76. label: "产品名称",
  77. prop: "flowStatus",
  78. data: [],
  79. },
  80. ]);
  81. const config = computed(() => {
  82. return [
  83. {
  84. attrs: {
  85. label: "行业名称",
  86. prop: "appName",
  87. },
  88. },
  89. {
  90. attrs: {
  91. label: "产品名称",
  92. prop: "productName",
  93. align: "center",
  94. },
  95. },
  96. {
  97. attrs: {
  98. label: "设备名称",
  99. prop: "deviceName",
  100. align: "center",
  101. },
  102. },
  103. {
  104. attrs: {
  105. label: "设备标识",
  106. prop: "nodeId",
  107. align: "center",
  108. },
  109. },
  110. {
  111. attrs: {
  112. label: "密钥",
  113. prop: "secret",
  114. align: "center",
  115. },
  116. },
  117. {
  118. attrs: {
  119. label: "操作",
  120. width: "200",
  121. align: "right",
  122. },
  123. // 渲染 el-button,一般用在最后一列。
  124. renderHTML(row) {
  125. return [
  126. {
  127. attrs: {
  128. label: "删除",
  129. type: "danger",
  130. text: true,
  131. },
  132. el: "button",
  133. click() {
  134. // 弹窗提示是否删除
  135. ElMessageBox.confirm(
  136. "此操作将永久删除该数据, 是否继续?",
  137. "提示",
  138. {
  139. confirmButtonText: "确定",
  140. cancelButtonText: "取消",
  141. type: "warning",
  142. }
  143. ).then(() => {
  144. // 删除
  145. proxy
  146. .post("/tdaDevice/delete", {
  147. id: row.id,
  148. })
  149. .then((res) => {
  150. ElMessage({
  151. message: "删除成功",
  152. type: "success",
  153. });
  154. getList();
  155. });
  156. });
  157. },
  158. },
  159. ];
  160. },
  161. },
  162. ];
  163. });
  164. let formData = reactive({
  165. data: {},
  166. treeData: [],
  167. });
  168. const formOption = reactive({
  169. inline: true,
  170. labelWidth: 100,
  171. itemWidth: 100,
  172. rules: [],
  173. });
  174. const byform = ref(null);
  175. const treeData = ref([]);
  176. const formConfig = reactive([
  177. {
  178. type: "select",
  179. prop: "copyTdaProductId",
  180. label: "行业名称",
  181. required: true,
  182. // isLoad: {
  183. // url: "/tdaApplication/page",
  184. // req: {
  185. // pageNum: 1,
  186. // pageSize: 9999,
  187. // },
  188. // labelKey: "appName",
  189. // labelVal: "id",
  190. // method: "post",
  191. // resUrl: "rows",
  192. // },
  193. },
  194. {
  195. type: "select",
  196. prop: "tdaProductId",
  197. label: "产品名称",
  198. required: true,
  199. data: [],
  200. },
  201. // isLoad: {
  202. // url: "/tdaProduct/page",
  203. // req: {
  204. // pageNum: 1,
  205. // pageSize: 9999,
  206. // },
  207. // labelKey: "name",
  208. // labelVal: "id",
  209. // method: "post",
  210. // resUrl: "rows",
  211. // },
  212. {
  213. type: "input",
  214. prop: "deviceName",
  215. label: "设备名称",
  216. required: true,
  217. },
  218. {
  219. type: "input",
  220. prop: "nodeId",
  221. label: "设备标识",
  222. required: true,
  223. },
  224. {
  225. type: "input",
  226. prop: "secret",
  227. label: "密钥",
  228. required: true,
  229. },
  230. ]);
  231. const getList = async (req) => {
  232. sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  233. loading.value = true;
  234. proxy.post("/tdaDevice/page", sourceList.value.pagination).then((message) => {
  235. console.log(message);
  236. sourceList.value.data = message.rows;
  237. sourceList.value.pagination.total = message.total;
  238. setTimeout(() => {
  239. loading.value = false;
  240. }, 200);
  241. });
  242. };
  243. const openModal = () => {
  244. dialogVisible.value = true;
  245. modalType.value = "add";
  246. formData.data = {};
  247. };
  248. const selection = ref({
  249. data: [],
  250. });
  251. const select = (_selection, row) => {
  252. selection.value.data = _selection;
  253. console.log(_selection.length);
  254. };
  255. const openRoomModal = () => {
  256. roomDialogVisible.value = true;
  257. proxy
  258. .get("/tenantInfo/roleMenuTreeSelect/" + selection.value.data[0].tenantId)
  259. .then((res) => {
  260. if (res.code == 200) {
  261. treeData.value = res.menus;
  262. formData.treeData = res.checkedKeys;
  263. tree.value.setCheckedKeys(res.checkedKeys);
  264. }
  265. });
  266. };
  267. const tree = ref(null);
  268. const submitTree = () => {
  269. proxy
  270. .post("/tenantInfo/bindingMenu", {
  271. tenantId: selection.value.data[0].tenantId,
  272. menuIdList: tree.value.getCheckedKeys(),
  273. })
  274. .then((res) => {
  275. ElMessage({
  276. message: "保存成功",
  277. type: "success",
  278. });
  279. roomDialogVisible.value = false;
  280. });
  281. };
  282. const submitForm = () => {
  283. console.log(byform.value);
  284. byform.value.handleSubmit((valid) => {
  285. submitLoading.value = true;
  286. proxy.post("/tdaDevice/" + modalType.value, formData.data).then(
  287. (res) => {
  288. ElMessage({
  289. message: modalType.value == "add" ? "添加成功" : "编辑成功",
  290. type: "success",
  291. });
  292. dialogVisible.value = false;
  293. submitLoading.value = false;
  294. getList();
  295. },
  296. (err) => (submitLoading.value = false)
  297. );
  298. });
  299. };
  300. const getDtl = (row) => {
  301. modalType.value = "edit";
  302. proxy.post("/tdaDevice/detail", { id: row.id }).then((res) => {
  303. formData.data = res;
  304. console.log(formData);
  305. dialogVisible.value = true;
  306. });
  307. };
  308. const selectData = reactive({
  309. tradeList: [],
  310. });
  311. const getSelect = () => {
  312. proxy
  313. .post("/tdaApplication/page", { pageNum: 1, pageSize: 9999 })
  314. .then((message) => {
  315. selectData.tradeList = message.rows;
  316. formConfig[0].data = selectData.tradeList.map((x) => ({
  317. title: x.appName,
  318. value: x.id,
  319. }));
  320. // formConfig[1].data = selectData.tradeList.map((x) => ({
  321. // title: x.name,
  322. // value: x.id,
  323. // }));
  324. });
  325. };
  326. watch(
  327. () => formData.data.copyTdaProductId,
  328. (val, old) => {
  329. if (val) {
  330. proxy
  331. .post("/tdaProduct/page", {
  332. pageNum: 1,
  333. pageSize: 9999,
  334. tdaApplicationId: val,
  335. })
  336. .then((res) => {
  337. formConfig[1].data = res.rows.map((x) => ({
  338. title: x.name,
  339. value: x.id,
  340. }));
  341. });
  342. }
  343. }
  344. );
  345. getList();
  346. getSelect();
  347. </script>
  348. <style lang="scss" scoped>
  349. .tenant {
  350. padding: 20px;
  351. }
  352. </style>