index.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306
  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' ? '添加IoT平台' : '编辑'" 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. name: [{ required: true, message: "请输入平台名称", trigger: "blur" }],
  53. endPoint: [{ required: true, message: "请输入EndPoint", trigger: "blur" }],
  54. accessKey: [{ required: true, message: "请输入access_key", trigger: "blur" }],
  55. accessCode: [
  56. { required: true, message: "请输入access_code", trigger: "blur" },
  57. ],
  58. accessKeyId: [
  59. { required: true, message: "请输入Access Key Id", trigger: "blur" },
  60. ],
  61. secretAccessKey: [
  62. { required: true, message: "请输入Secret Access Key", trigger: "blur" },
  63. ],
  64. productId: [{ required: true, message: "请输入项目 ID", trigger: "blur" }],
  65. });
  66. const { proxy } = getCurrentInstance();
  67. const selectConfig = [];
  68. const config = computed(() => {
  69. return [
  70. {
  71. attrs: {
  72. label: "平台类型",
  73. prop: "type",
  74. width: 100,
  75. },
  76. render(type) {
  77. return "华为";
  78. },
  79. },
  80. {
  81. attrs: {
  82. label: "平台名称",
  83. prop: "name",
  84. width: 150,
  85. },
  86. },
  87. {
  88. attrs: {
  89. label: "EndPoint",
  90. prop: "endPoint",
  91. },
  92. },
  93. {
  94. attrs: {
  95. label: "Access Key Id",
  96. prop: "accessKeyId",
  97. },
  98. },
  99. {
  100. attrs: {
  101. label: "Secret Access Key",
  102. prop: "secretAccessKey",
  103. },
  104. },
  105. {
  106. attrs: {
  107. label: "项目 ID",
  108. prop: "productId",
  109. },
  110. },
  111. {
  112. attrs: {
  113. label: "备注",
  114. prop: "remark",
  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: "primary",
  130. text: true,
  131. },
  132. el: "button",
  133. click() {
  134. getDtl(row);
  135. },
  136. },
  137. {
  138. attrs: {
  139. label: "删除",
  140. type: "danger",
  141. text: true,
  142. },
  143. el: "button",
  144. click() {
  145. // 弹窗提示是否删除
  146. ElMessageBox.confirm(
  147. "此操作将永久删除该数据, 是否继续?",
  148. "提示",
  149. {
  150. confirmButtonText: "确定",
  151. cancelButtonText: "取消",
  152. type: "warning",
  153. }
  154. ).then(() => {
  155. // 删除
  156. proxy
  157. .post("/tdaConfig/delete", {
  158. id: row.id,
  159. })
  160. .then((res) => {
  161. ElMessage({
  162. message: "删除成功",
  163. type: "success",
  164. });
  165. getList();
  166. });
  167. });
  168. },
  169. },
  170. ];
  171. },
  172. },
  173. ];
  174. });
  175. let formData = reactive({
  176. data: {
  177. type: "1",
  178. },
  179. treeData: [],
  180. });
  181. const formOption = reactive({
  182. inline: true,
  183. labelWidth: 100,
  184. itemWidth: 100,
  185. rules: [],
  186. });
  187. const byform = ref(null);
  188. const treeData = ref([]);
  189. const formConfig = computed(() => {
  190. return [
  191. {
  192. type: "input",
  193. prop: "name",
  194. label: "平台名称",
  195. required: true,
  196. itemType: "text",
  197. },
  198. {
  199. type: "input",
  200. prop: "endPoint",
  201. label: "EndPoint",
  202. required: true,
  203. },
  204. {
  205. type: "input",
  206. prop: "accessKey",
  207. label: "access_key",
  208. required: true,
  209. },
  210. {
  211. type: "input",
  212. prop: "accessCode",
  213. label: "access_code",
  214. required: true,
  215. },
  216. {
  217. type: "input",
  218. prop: "accessKeyId",
  219. label: "Access Key Id",
  220. required: true,
  221. },
  222. {
  223. type: "input",
  224. prop: "secretAccessKey",
  225. label: "Secret Access Key",
  226. required: true,
  227. },
  228. {
  229. type: "input",
  230. prop: "productId",
  231. label: "项目 ID",
  232. required: true,
  233. },
  234. {
  235. type: "input",
  236. itemType: "textarea",
  237. prop: "remark",
  238. label: "备注",
  239. required: true,
  240. },
  241. ];
  242. });
  243. const getList = async (req) => {
  244. sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  245. loading.value = true;
  246. proxy.post("/tdaConfig/page", sourceList.value.pagination).then((message) => {
  247. console.log(message);
  248. sourceList.value.data = message.rows;
  249. sourceList.value.pagination.total = message.total;
  250. setTimeout(() => {
  251. loading.value = false;
  252. }, 200);
  253. });
  254. };
  255. const openModal = () => {
  256. dialogVisible.value = true;
  257. modalType.value = "add";
  258. formData.data = {};
  259. };
  260. const selection = ref({
  261. data: [],
  262. });
  263. const select = (_selection, row) => {
  264. selection.value.data = _selection;
  265. console.log(_selection.length);
  266. };
  267. const submitForm = () => {
  268. console.log(byform.value);
  269. byform.value.handleSubmit((valid) => {
  270. submitLoading.value = true;
  271. proxy.post("/tdaConfig/" + modalType.value, formData.data).then(
  272. (res) => {
  273. ElMessage({
  274. message: modalType.value == "add" ? "添加成功" : "编辑成功",
  275. type: "success",
  276. });
  277. dialogVisible.value = false;
  278. submitLoading.value = false;
  279. getList();
  280. },
  281. (err) => (submitLoading.value = false)
  282. );
  283. });
  284. };
  285. const getDtl = (row) => {
  286. modalType.value = "edit";
  287. proxy.post("/tdaConfig/detail", { id: row.id }).then((res) => {
  288. formData.data = res;
  289. console.log(formData);
  290. dialogVisible.value = true;
  291. });
  292. };
  293. getList();
  294. </script>
  295. <style lang="scss" scoped>
  296. .tenant {
  297. padding: 20px;
  298. }
  299. </style>