Kaynağa Gözat

物联网iot模块静态页面,完成iot配置和行业管理页面

cz 2 yıl önce
ebeveyn
işleme
cace4ff3fb

+ 92 - 52
src/utils/request.js

@@ -1,15 +1,29 @@
 import axios from 'axios'
-import { ElNotification , ElMessageBox, ElMessage, ElLoading } from 'element-plus'
-import { getToken } from '@/utils/auth'
+import {
+  ElNotification,
+  ElMessageBox,
+  ElMessage,
+  ElLoading
+} from 'element-plus'
+import {
+  getToken
+} from '@/utils/auth'
 import errorCode from '@/utils/errorCode'
-import { tansParams, blobValidate } from '@/utils/ruoyi'
+import {
+  tansParams,
+  blobValidate
+} from '@/utils/ruoyi'
 import cache from '@/plugins/cache'
-import { saveAs } from 'file-saver'
+import {
+  saveAs
+} from 'file-saver'
 import useUserStore from '@/store/modules/user'
 
 let downloadLoadingInstance;
 // 是否显示重新登录
-export let isRelogin = { show: false };
+export let isRelogin = {
+  show: false
+};
 
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 // 创建axios实例
@@ -17,7 +31,7 @@ const service = axios.create({
   // axios中请求配置有baseURL选项,表示请求URL公共部分
   baseURL: import.meta.env.VITE_APP_BASE_API,
   // 超时
-  timeout: 10000
+  timeout: 100000
 })
 
 // request拦截器
@@ -37,7 +51,7 @@ service.interceptors.request.use(config => {
     config.url = url;
   }
   if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
-    
+
     const requestObj = {
       url: config.url,
       data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
@@ -47,10 +61,10 @@ service.interceptors.request.use(config => {
     if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
       cache.session.setJSON('sessionObj', requestObj)
     } else {
-      const s_url = sessionObj.url;                // 请求地址
-      const s_data = sessionObj.data;              // 请求数据
-      const s_time = sessionObj.time;              // 请求时间
-      const interval = 1000;                       // 间隔时间(ms),小于此时间视为重复提交
+      const s_url = sessionObj.url; // 请求地址
+      const s_data = sessionObj.data; // 请求数据
+      const s_time = sessionObj.time; // 请求时间
+      const interval = 1000; // 间隔时间(ms),小于此时间视为重复提交
       if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
         const message = '数据正在处理,请勿重复提交';
         console.warn(`[${s_url}]: ` + message)
@@ -62,8 +76,8 @@ service.interceptors.request.use(config => {
   }
   return config
 }, error => {
-    console.log(error)
-    Promise.reject(error)
+  console.log(error)
+  Promise.reject(error)
 })
 
 // 响应拦截器
@@ -73,37 +87,51 @@ service.interceptors.response.use(res => {
     // 获取错误信息
     const msg = errorCode[code] || res.data.msg || errorCode['default']
     // 二进制数据则直接返回
-    if(res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer'){
+    if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
       return res.data
     }
     if (code === 401) {
       if (!isRelogin.show) {
         isRelogin.show = true;
-        ElMessageBox.confirm('登录状态已过期,您可以继续留在该页面,或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
+        ElMessageBox.confirm('登录状态已过期,您可以继续留在该页面,或者重新登录', '系统提示', {
+          confirmButtonText: '重新登录',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
           isRelogin.show = false;
           useUserStore().logOut().then(() => {
             location.href = '/index';
           })
-      }).catch(() => {
-        isRelogin.show = false;
-      });
-    }
+        }).catch(() => {
+          isRelogin.show = false;
+        });
+      }
       return Promise.reject('无效的会话,或者会话已过期,请重新登录。')
     } else if (code === 500) {
-      ElMessage({ message: msg, type: 'error' })
+      ElMessage({
+        message: msg,
+        type: 'error'
+      })
       return Promise.reject(new Error(msg))
     } else if (code === 601) {
-      ElMessage({ message: msg, type: 'warning' })
+      ElMessage({
+        message: msg,
+        type: 'warning'
+      })
       return Promise.reject(new Error(msg))
     } else if (code !== 200) {
-      ElNotification.error({ title: msg })
+      ElNotification.error({
+        title: msg
+      })
       return Promise.reject('error')
     } else {
-      return  Promise.resolve(res.data)
+      return Promise.resolve(res.data)
     }
   },
   error => {
-    let { message } = error;
+    let {
+      message
+    } = error;
     if (message == "Network Error") {
       message = "后端接口连接异常";
     } else if (message.includes("timeout")) {
@@ -111,16 +139,27 @@ service.interceptors.response.use(res => {
     } else if (message.includes("Request failed with status code")) {
       message = "系统接口" + message.substr(message.length - 3) + "异常";
     }
-    ElMessage({ message: message, type: 'error', duration: 5 * 1000 })
+    ElMessage({
+      message: message,
+      type: 'error',
+      duration: 5 * 1000
+    })
     return Promise.reject(error)
   }
 )
 // 通用下载方法
 export function download(url, params, filename, config) {
-  downloadLoadingInstance = ElLoading.service({ text: "正在下载数据,请稍候", background: "rgba(0, 0, 0, 0.7)", })
+  downloadLoadingInstance = ElLoading.service({
+    text: "正在下载数据,请稍候",
+    background: "rgba(0, 0, 0, 0.7)",
+  })
   return service.post(url, params, {
-    transformRequest: [(params) => { return tansParams(params) }],
-    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    transformRequest: [(params) => {
+      return tansParams(params)
+    }],
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
     responseType: 'blob',
     ...config
   }).then(async (data) => {
@@ -145,37 +184,38 @@ export function download(url, params, filename, config) {
 
 export function get(url, params = {}) {
   return new Promise((resolve, reject) => {
-      service.get(url, {params:params})
-          .then(response => {
-              setTimeout(() => {
-              }, 500)
-              resolve(response);
-          }, err => {
-              reject(err)
-          })
+    service.get(url, {
+        params: params
+      })
+      .then(response => {
+        setTimeout(() => {}, 500)
+        resolve(response);
+      }, err => {
+        reject(err)
+      })
   })
 }
 
 
 /**
-* 封装post请求
-* @param url
-* @param data
-* @returns {Promise}
-*/
+ * 封装post请求
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
 
-export function post(url, data = {},method) {
+export function post(url, data = {}, method) {
   return new Promise((resolve, reject) => {
-      console.log(method)
-      service({
-        method: method || 'post',
-        url:url,
-        data: data,
-      }).then(res=>{
-        resolve(res.data);
-      })
-      
+    console.log(method)
+    service({
+      method: method || 'post',
+      url: url,
+      data: data,
+    }).then(res => {
+      resolve(res.data);
+    })
+
   })
 }
 
-export default service
+export default service

+ 31 - 30
src/views/iot/base/equipment/index.vue

@@ -75,17 +75,20 @@ let dialogVisible = ref(false);
 let roomDialogVisible = ref(false);
 let modalType = ref("add");
 let rules = ref({
-  tenantId: [
+  tdaProductId: [
     { required: true, message: "请选择行业名称", trigger: ["blur", "change"] },
   ],
-  tenantId: [
-    { required: true, message: "请输入产品名称", trigger: ["blur", "change"] },
+  productId: [
+    { required: true, message: "请选择产品名称", trigger: ["blur", "change"] },
   ],
-  tenantId: [
-    { required: true, message: "请选择厂商名称", trigger: ["blur", "change"] },
+  deviceName: [
+    { required: true, message: "请输入设备名称", trigger: ["blur", "change"] },
   ],
-  tenantId: [
-    { required: true, message: "请选择设备类型", trigger: ["blur", "change"] },
+  nodeId: [
+    { required: true, message: "请输入设备标识", trigger: ["blur", "change"] },
+  ],
+  secret: [
+    { required: true, message: "请输入密钥", trigger: ["blur", "change"] },
   ],
 });
 const { proxy } = getCurrentInstance();
@@ -134,34 +137,34 @@ const config = computed(() => {
     {
       attrs: {
         label: "行业名称",
-        prop: "enterpriseName",
+        prop: "appName",
       },
     },
     {
       attrs: {
         label: "产品名称",
-        prop: "tenantId",
+        prop: "productName",
         align: "center",
       },
     },
     {
       attrs: {
         label: "设备名称",
-        prop: "accountCount",
+        prop: "deviceName",
         align: "center",
       },
     },
     {
       attrs: {
         label: "设备标识",
-        prop: "accountCount",
+        prop: "nodeId",
         align: "center",
       },
     },
     {
       attrs: {
         label: "密钥",
-        prop: "accountCount",
+        prop: "secret",
         align: "center",
       },
     },
@@ -194,7 +197,7 @@ const config = computed(() => {
               ).then(() => {
                 // 删除
                 proxy
-                  .post("/tenantInfo/delete", {
+                  .post("/tdaDevice/delete", {
                     id: row.id,
                   })
                   .then((res) => {
@@ -229,7 +232,7 @@ const formConfig = computed(() => {
   return [
     {
       type: "select",
-      prop: "enterpriseName",
+      prop: "tdaProductId",
       label: "行业名称",
       required: true,
       data: [
@@ -241,7 +244,7 @@ const formConfig = computed(() => {
     },
     {
       type: "select",
-      prop: "tenantId",
+      prop: "productId",
       label: "产品名称",
       required: true,
       data: [
@@ -253,19 +256,19 @@ const formConfig = computed(() => {
     },
     {
       type: "input",
-      prop: "enterpriseName",
+      prop: "deviceName",
       label: "设备名称",
       required: true,
     },
     {
       type: "input",
-      prop: "enterpriseName",
+      prop: "nodeId",
       label: "设备标识",
       required: true,
     },
     {
       type: "input",
-      prop: "enterpriseName",
+      prop: "secret",
       label: "密钥",
       required: true,
     },
@@ -274,16 +277,14 @@ const formConfig = computed(() => {
 const getList = async (req) => {
   sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
   loading.value = true;
-  proxy
-    .post("/tenantInfo/page", sourceList.value.pagination)
-    .then((message) => {
-      console.log(message);
-      sourceList.value.data = message.rows;
-      sourceList.value.pagination.total = message.total;
-      setTimeout(() => {
-        loading.value = false;
-      }, 200);
-    });
+  proxy.post("/tdaDevice/page", sourceList.value.pagination).then((message) => {
+    console.log(message);
+    sourceList.value.data = message.rows;
+    sourceList.value.pagination.total = message.total;
+    setTimeout(() => {
+      loading.value = false;
+    }, 200);
+  });
 };
 const openModal = () => {
   dialogVisible.value = true;
@@ -331,7 +332,7 @@ const submitForm = () => {
   byform.value.handleSubmit((valid) => {
     submitLoading.value = true;
 
-    proxy.post("/tenantInfo/" + modalType.value, formData.data).then((res) => {
+    proxy.post("/tdaDevice/" + modalType.value, formData.data).then((res) => {
       ElMessage({
         message: modalType.value == "add" ? "添加成功" : "编辑成功",
         type: "success",
@@ -345,7 +346,7 @@ const submitForm = () => {
 
 const getDtl = (row) => {
   modalType = "edit";
-  proxy.post("/tenantInfo/detail", { id: row.id }).then((res) => {
+  proxy.post("/tdaDevice/detail", { id: row.id }).then((res) => {
     formData.data = res;
     console.log(formData);
     dialogVisible.value = true;

+ 23 - 9
src/views/iot/base/loT/index.vue

@@ -77,6 +77,11 @@ let modalType = ref("add");
 let rules = ref({
   name: [{ required: true, message: "请输入平台名称", trigger: "blur" }],
   endPoint: [{ required: true, message: "请输入EndPoint", trigger: "blur" }],
+  accessKey: [{ required: true, message: "请输入access_key", trigger: "blur" }],
+  accessCode: [
+    { required: true, message: "请输入access_code", trigger: "blur" },
+  ],
+
   accessKeyId: [
     { required: true, message: "请输入Access Key Id", trigger: "blur" },
   ],
@@ -93,50 +98,47 @@ const config = computed(() => {
       attrs: {
         label: "平台类型",
         prop: "type",
-        render(type) {
-          return "华为";
-        },
+        width: 100,
+      },
+      render(type) {
+        return "华为";
       },
     },
     {
       attrs: {
         label: "平台名称",
         prop: "name",
+        width: 150,
       },
     },
     {
       attrs: {
         label: "EndPoint",
         prop: "endPoint",
-        align: "center",
       },
     },
     {
       attrs: {
         label: "Access Key Id",
         prop: "accessKeyId",
-        align: "center",
       },
     },
     {
       attrs: {
         label: "Secret Access Key",
         prop: "secretAccessKey",
-        align: "center",
       },
     },
     {
       attrs: {
         label: "项目 ID",
         prop: "productId",
-        align: "center",
       },
     },
     {
       attrs: {
         label: "备注",
         prop: "remark",
-        align: "center",
       },
     },
 
@@ -230,6 +232,18 @@ const formConfig = computed(() => {
     },
     {
       type: "input",
+      prop: "accessKey",
+      label: "access_key",
+      required: true,
+    },
+    {
+      type: "input",
+      prop: "accessCode",
+      label: "access_code",
+      required: true,
+    },
+    {
+      type: "input",
       prop: "accessKeyId",
       label: "Access Key Id",
       required: true,
@@ -296,7 +310,7 @@ const submitForm = () => {
 };
 
 const getDtl = (row) => {
-  modalType = "edit";
+  modalType.value = "edit";
   proxy.post("/tdaConfig/detail", { id: row.id }).then((res) => {
     formData.data = res;
     console.log(formData);

+ 16 - 17
src/views/iot/base/product/index.vue

@@ -134,41 +134,41 @@ const config = computed(() => {
     {
       attrs: {
         label: "行业名称",
-        prop: "enterpriseName",
+        prop: "appName",
       },
     },
     {
       attrs: {
         label: "产品名称",
-        prop: "tenantId",
+        prop: "name",
         align: "center",
       },
     },
     {
       attrs: {
         label: "协议类型",
-        prop: "accountCount",
+        prop: "protocolType",
         align: "center",
       },
     },
     {
       attrs: {
         label: "数据格式",
-        prop: "accountCount",
+        prop: "dataFormat",
         align: "center",
       },
     },
     {
       attrs: {
         label: "厂商名称",
-        prop: "accountCount",
+        prop: "manufacturerName",
         align: "center",
       },
     },
     {
       attrs: {
         label: "设备类型",
-        prop: "flowStatus",
+        prop: "deviceType",
       },
     },
 
@@ -201,7 +201,7 @@ const config = computed(() => {
               ).then(() => {
                 // 删除
                 proxy
-                  .post("/tenantInfo/delete", {
+                  .post("/tdaProduct/delete", {
                     id: row.id,
                   })
                   .then((res) => {
@@ -236,7 +236,7 @@ const formConfig = computed(() => {
   return [
     {
       type: "select",
-      prop: "enterpriseName",
+      prop: "appId",
       label: "行业名称",
       required: true,
       data: [
@@ -248,7 +248,7 @@ const formConfig = computed(() => {
     },
     {
       type: "input",
-      prop: "tenantId",
+      prop: "name",
       label: "产品名称",
       required: true,
       itemWidth: 100,
@@ -256,27 +256,27 @@ const formConfig = computed(() => {
     },
     {
       type: "select",
-      prop: "enterpriseName",
+      prop: "protocolType",
       label: "协议类型",
       disabled: true,
       required: true,
     },
     {
       type: "select",
-      prop: "enterpriseName",
+      prop: "dataFormat",
       label: "数据格式",
       disabled: true,
       required: true,
     },
     {
       type: "select",
-      prop: "enterpriseName",
+      prop: "manufacturerName",
       label: "厂商名称",
       required: true,
     },
     {
       type: "select",
-      prop: "enterpriseName",
+      prop: "deviceType",
       label: "设备类型",
       required: true,
     },
@@ -286,7 +286,7 @@ const getList = async (req) => {
   sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
   loading.value = true;
   proxy
-    .post("/tenantInfo/page", sourceList.value.pagination)
+    .post("/tdaProduct/page", sourceList.value.pagination)
     .then((message) => {
       console.log(message);
       sourceList.value.data = message.rows;
@@ -310,7 +310,6 @@ const select = (_selection, row) => {
 };
 const openRoomModal = () => {
   roomDialogVisible.value = true;
-
   proxy
     .get("/tenantInfo/roleMenuTreeSelect/" + selection.value.data[0].tenantId)
     .then((res) => {
@@ -342,7 +341,7 @@ const submitForm = () => {
   byform.value.handleSubmit((valid) => {
     submitLoading.value = true;
 
-    proxy.post("/tenantInfo/" + modalType.value, formData.data).then((res) => {
+    proxy.post("/tdaProduct/" + modalType.value, formData.data).then((res) => {
       ElMessage({
         message: modalType.value == "add" ? "添加成功" : "编辑成功",
         type: "success",
@@ -356,7 +355,7 @@ const submitForm = () => {
 
 const getDtl = (row) => {
   modalType = "edit";
-  proxy.post("/tenantInfo/detail", { id: row.id }).then((res) => {
+  proxy.post("/tdaProduct/detail", { id: row.id }).then((res) => {
     formData.data = res;
     console.log(formData);
     dialogVisible.value = true;

+ 79 - 75
src/views/iot/base/trade/index.vue

@@ -27,7 +27,7 @@
       </byTable>
     </div>
     <el-dialog
-      :title="modalType == 'add' ? '添加' : '编辑'"
+      :title="modalType == 'add' ? '添加' : '详情'"
       v-model="dialogVisible"
       width="800"
       v-loading="loading"
@@ -43,6 +43,7 @@
       <template #footer>
         <el-button @click="dialogVisible = false" size="large">取 消</el-button>
         <el-button
+          v-if="modalType == 'add'"
           type="primary"
           @click="submitForm('byform')"
           size="large"
@@ -60,7 +61,7 @@
 import { ElMessage, ElMessageBox } from "element-plus";
 import byTable from "@/components/byTable/index";
 import byForm from "@/components/byForm/index";
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, reactive, ref } from "vue";
 const loading = ref(false);
 const submitLoading = ref(false);
 const sourceList = ref({
@@ -75,73 +76,56 @@ let dialogVisible = ref(false);
 let roomDialogVisible = ref(false);
 let modalType = ref("add");
 let rules = ref({
-  tenantId: [{ required: true, message: "请输入行业名称", trigger: "blur" }],
-  tenantId: [{ required: true, message: "请选择loT平台", trigger: "change" }],
-  tenantId: [{ required: true, message: "请输入备注", trigger: "blur" }],
+  appName: [{ required: true, message: "请输入行业名称", trigger: "blur" }],
+  tdaConfigId: [
+    { required: true, message: "请选择loT平台", trigger: "change" },
+  ],
+  // remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
 });
 const { proxy } = getCurrentInstance();
-const selectConfig = computed(() => {
-  return [
-    {
-      label: "loT平台",
-      prop: "flowStatus",
-      data: [
-        {
-          label: "审核中",
-          value: "1",
-        },
-        {
-          label: "审核通过",
-          value: "2",
-        },
-        {
-          label: "审核不通过",
-          value: "3",
-        },
-      ],
-    },
-  ];
-});
+const selectConfig = reactive([
+  {
+    label: "Iot平台",
+    prop: "id",
+    data: [],
+  },
+]);
 const config = computed(() => {
   return [
     {
       attrs: {
         label: "loT平台",
-        prop: "enterpriseName",
+        prop: "configName",
       },
     },
     {
       attrs: {
         label: "行业名称",
-        prop: "tenantId",
-        align: "center",
+        prop: "appName",
       },
     },
     {
       attrs: {
         label: "AppId",
-        prop: "accountCount",
-        align: "center",
+        prop: "appId",
       },
     },
     {
       attrs: {
         label: "创建人",
-        prop: "accountCount",
-        align: "center",
+        prop: "createUser",
       },
     },
     {
       attrs: {
         label: "创建时间",
-        prop: "accountCount",
-        align: "center",
+        prop: "createTime",
       },
     },
     {
       attrs: {
         label: "备注",
-        prop: "flowStatus",
+        prop: "remark",
       },
     },
     {
@@ -167,7 +151,7 @@ const config = computed(() => {
           {
             attrs: {
               label: "删除",
-              type: "primary",
+              type: "danger",
               text: true,
             },
             el: "button",
@@ -184,7 +168,7 @@ const config = computed(() => {
               ).then(() => {
                 // 删除
                 proxy
-                  .post("/tenantInfo/delete", {
+                  .post("/tdaApplication/delete", {
                     id: row.id,
                   })
                   .then((res) => {
@@ -215,36 +199,34 @@ const formOption = reactive({
 });
 const byform = ref(null);
 const treeData = ref([]);
-const formConfig = computed(() => {
-  return [
-    {
-      type: "input",
-      prop: "tenantId",
-      label: "行业名称",
-      required: true,
-      itemWidth: 100,
-      itemType: "text",
-    },
-    {
-      type: "select",
-      prop: "enterpriseName",
-      label: "IoT 平台",
-      required: true,
-    },
-    {
-      type: "input",
-      itemType: "textarea",
-      prop: "password",
-      label: "备注",
-      required: true,
-    },
-  ];
-});
+const formConfig = reactive([
+  {
+    type: "input",
+    prop: "appName",
+    label: "行业名称",
+    required: true,
+    itemType: "text",
+  },
+  {
+    type: "select",
+    prop: "tdaConfigId",
+    label: "IoT 平台",
+    required: true,
+    data: [],
+  },
+  {
+    type: "input",
+    itemType: "textarea",
+    prop: "remark",
+    label: "备注",
+    required: true,
+  },
+]);
 const getList = async (req) => {
   sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
   loading.value = true;
   proxy
-    .post("/tenantInfo/page", sourceList.value.pagination)
+    .post("/tdaApplication/page", sourceList.value.pagination)
     .then((message) => {
       console.log(message);
       sourceList.value.data = message.rows;
@@ -300,28 +282,50 @@ const submitForm = () => {
   byform.value.handleSubmit((valid) => {
     submitLoading.value = true;
 
-    proxy.post("/tenantInfo/" + modalType.value, formData.data).then((res) => {
-      ElMessage({
-        message: modalType.value == "add" ? "添加成功" : "编辑成功",
-        type: "success",
+    proxy
+      .post("/tdaApplication/" + modalType.value, formData.data)
+      .then((res) => {
+        ElMessage({
+          message: modalType.value == "add" ? "添加成功" : "编辑成功",
+          type: "success",
+        });
+        dialogVisible.value = false;
+        submitLoading.value = false;
+        getList();
       });
-      dialogVisible.value = false;
-      submitLoading.value = false;
-      getList();
-    });
   });
 };
 
 const getDtl = (row) => {
-  modalType = "edit";
-  proxy.post("/tenantInfo/detail", { id: row.id }).then((res) => {
+  modalType.value = "edit";
+  proxy.post("/tdaApplication/detail", { id: row.id }).then((res) => {
     formData.data = res;
     console.log(formData);
     dialogVisible.value = true;
   });
 };
 
+const selectData = reactive({
+  iotList: [],
+});
+const getSelect = () => {
+  proxy
+    .post("/tdaConfig/page", { pageNum: 1, pageSize: 9999 })
+    .then((message) => {
+      selectData.iotList = message.rows;
+      selectConfig[0].data = selectData.iotList.map((x) => ({
+        label: x.name,
+        value: x.id,
+      }));
+      formConfig[1].data = selectData.iotList.map((x) => ({
+        title: x.name,
+        value: x.id,
+      }));
+    });
+};
+
 getList();
+getSelect();
 </script>
   
 <style lang="scss" scoped>

+ 295 - 0
src/views/production/factory/farm/index.vue

@@ -0,0 +1,295 @@
+<template>
+  <div class="tenant">
+    <!-- <Banner /> -->
+    <div class="content">
+      <byTable
+        :source="sourceList.data"
+        :pagination="sourceList.pagination"
+        :config="config"
+        :loading="loading"
+        highlight-current-row
+        :selectConfig="selectConfig"
+        :table-events="{
+          //element talbe事件都能传
+          select: select,
+        }"
+        :action-list="[
+          {
+            text: '添加车间',
+            action: () => openModal('add'),
+          },
+        ]"
+        @get-list="getList"
+      >
+        <template #slotName="{ item }">
+          {{ item.createTime }}
+        </template>
+      </byTable>
+    </div>
+    <el-dialog
+      :title="modalType == 'add' ? '添加车间' : '编辑'"
+      v-model="dialogVisible"
+      width="800"
+      v-loading="loading"
+    >
+      <byForm
+        :formConfig="formConfig"
+        :formOption="formOption"
+        v-model="formData.data"
+        :rules="rules"
+        ref="byform"
+      >
+      </byForm>
+      <template #footer>
+        <el-button @click="dialogVisible = false" size="large">取 消</el-button>
+        <el-button
+          type="primary"
+          @click="submitForm('byform')"
+          size="large"
+          :loading="submitLoading"
+        >
+          确 定
+        </el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+  
+<script setup>
+/* eslint-disable vue/no-unused-components */
+import { ElMessage, ElMessageBox } from "element-plus";
+import byTable from "@/components/byTable/index";
+import byForm from "@/components/byForm/index";
+import { computed, defineComponent, ref } from "vue";
+const loading = ref(false);
+const submitLoading = ref(false);
+const sourceList = ref({
+  data: [],
+  pagination: {
+    total: 3,
+    pageNum: 1,
+    pageSize: 10,
+  },
+});
+let dialogVisible = ref(false);
+let roomDialogVisible = ref(false);
+let modalType = ref("add");
+let rules = ref({
+  name: [{ required: true, message: "请选择车间类型", trigger: "change" }],
+  endPoint: [{ required: true, message: "请输入车间名称", trigger: "blur" }],
+});
+const { proxy } = getCurrentInstance();
+const selectConfig = computed(() => {
+  return [
+    {
+      label: "车间类型",
+      prop: "flowStatus",
+      data: [
+        {
+          label: "审核中",
+          value: "1",
+        },
+        {
+          label: "审核通过",
+          value: "2",
+        },
+        {
+          label: "审核不通过",
+          value: "3",
+        },
+      ],
+    },
+  ];
+});
+const config = computed(() => {
+  return [
+    {
+      attrs: {
+        label: "车间类型",
+        prop: "type",
+        width: 120,
+        render(type) {
+          return "华为";
+        },
+      },
+    },
+    {
+      attrs: {
+        label: "车间名称",
+        prop: "name",
+        width: 150,
+      },
+    },
+    {
+      attrs: {
+        label: "负责人",
+        prop: "endPoint",
+        width: 100,
+      },
+    },
+    {
+      attrs: {
+        label: "车间说明",
+        prop: "accessKeyId",
+      },
+    },
+
+    {
+      attrs: {
+        label: "操作",
+        width: "200",
+        align: "right",
+      },
+      // 渲染 el-button,一般用在最后一列。
+      renderHTML(row) {
+        return [
+          {
+            attrs: {
+              label: "修改",
+              type: "primary",
+              text: true,
+            },
+            el: "button",
+            click() {
+              getDtl(row);
+            },
+          },
+          {
+            attrs: {
+              label: "删除",
+              type: "danger",
+              text: true,
+            },
+            el: "button",
+            click() {
+              // 弹窗提示是否删除
+              ElMessageBox.confirm(
+                "此操作将永久删除该数据, 是否继续?",
+                "提示",
+                {
+                  confirmButtonText: "确定",
+                  cancelButtonText: "取消",
+                  type: "warning",
+                }
+              ).then(() => {
+                // 删除
+                proxy
+                  .post("/tdaConfig/delete", {
+                    id: row.id,
+                  })
+                  .then((res) => {
+                    ElMessage({
+                      message: "删除成功",
+                      type: "success",
+                    });
+                    getList();
+                  });
+              });
+            },
+          },
+        ];
+      },
+    },
+  ];
+});
+
+let formData = reactive({
+  data: {
+    type: "1",
+  },
+  treeData: [],
+});
+const formOption = reactive({
+  inline: true,
+  labelWidth: 100,
+  itemWidth: 100,
+  rules: [],
+});
+const byform = ref(null);
+const treeData = ref([]);
+const formConfig = computed(() => {
+  return [
+    {
+      type: "select",
+      prop: "name",
+      label: "车间类型",
+      required: true,
+      data: [],
+    },
+    {
+      type: "input",
+      prop: "aa",
+      label: "车间名称",
+      required: true,
+    },
+    {
+      type: "select",
+      prop: "name",
+      label: "负责人",
+      data: [],
+    },
+    {
+      type: "input",
+      prop: "secretAccessKey",
+      label: "车间说明",
+      itemType: "textarea",
+    },
+  ];
+});
+const getList = async (req) => {
+  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
+  loading.value = true;
+  proxy.post("/tdaConfig/page", sourceList.value.pagination).then((message) => {
+    console.log(message);
+    sourceList.value.data = message.rows;
+    sourceList.value.pagination.total = message.total;
+    setTimeout(() => {
+      loading.value = false;
+    }, 200);
+  });
+};
+const openModal = () => {
+  dialogVisible.value = true;
+  modalType.value = "add";
+  formData.data = {};
+};
+const selection = ref({
+  data: [],
+});
+const select = (_selection, row) => {
+  selection.value.data = _selection;
+  console.log(_selection.length);
+};
+const submitForm = () => {
+  console.log(byform.value);
+  byform.value.handleSubmit((valid) => {
+    submitLoading.value = true;
+    proxy.post("/tdaConfig/" + modalType.value, formData.data).then((res) => {
+      ElMessage({
+        message: modalType.value == "add" ? "添加成功" : "编辑成功",
+        type: "success",
+      });
+      dialogVisible.value = false;
+      submitLoading.value = false;
+      getList();
+    });
+  });
+};
+
+const getDtl = (row) => {
+  modalType = "edit";
+  proxy.post("/tdaConfig/detail", { id: row.id }).then((res) => {
+    formData.data = res;
+    console.log(formData);
+    dialogVisible.value = true;
+  });
+};
+
+// getList();
+</script>
+  
+<style lang="scss" scoped>
+.tenant {
+  padding: 20px;
+}
+</style>

+ 328 - 0
src/views/production/factory/line/index.vue

@@ -0,0 +1,328 @@
+<template>
+  <div class="tenant">
+    <!-- <Banner /> -->
+    <div class="content">
+      <byTable
+        :source="sourceList.data"
+        :pagination="sourceList.pagination"
+        :config="config"
+        :loading="loading"
+        highlight-current-row
+        :selectConfig="selectConfig"
+        :table-events="{
+          //element talbe事件都能传
+          select: select,
+        }"
+        :action-list="[
+          {
+            text: '添加产线',
+            action: () => openModal('add'),
+          },
+        ]"
+        @get-list="getList"
+      >
+        <template #slotName="{ item }">
+          {{ item.createTime }}
+        </template>
+      </byTable>
+    </div>
+    <el-dialog
+      :title="modalType == 'add' ? '添加产线' : '编辑'"
+      v-model="dialogVisible"
+      width="800"
+      v-loading="loading"
+    >
+      <byForm
+        :formConfig="formConfig"
+        :formOption="formOption"
+        v-model="formData.data"
+        :rules="rules"
+        ref="byform"
+      >
+      </byForm>
+      <template #footer>
+        <el-button @click="dialogVisible = false" size="large">取 消</el-button>
+        <el-button
+          type="primary"
+          @click="submitForm('byform')"
+          size="large"
+          :loading="submitLoading"
+        >
+          确 定
+        </el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+  
+<script setup>
+/* eslint-disable vue/no-unused-components */
+import { ElMessage, ElMessageBox } from "element-plus";
+import byTable from "@/components/byTable/index";
+import byForm from "@/components/byForm/index";
+import { computed, defineComponent, ref } from "vue";
+const loading = ref(false);
+const submitLoading = ref(false);
+const sourceList = ref({
+  data: [],
+  pagination: {
+    total: 3,
+    pageNum: 1,
+    pageSize: 10,
+  },
+});
+let dialogVisible = ref(false);
+let roomDialogVisible = ref(false);
+let modalType = ref("add");
+let rules = ref({
+  name: [{ required: true, message: "请选择车间名称", trigger: "change" }],
+  name: [{ required: true, message: "请选择产线类型", trigger: "change" }],
+  endPoint: [{ required: true, message: "请输入产线名称", trigger: "blur" }],
+});
+const { proxy } = getCurrentInstance();
+const selectConfig = computed(() => {
+  return [
+    {
+      label: "车间",
+      prop: "flowStatus",
+      data: [
+        {
+          label: "审核中",
+          value: "1",
+        },
+        {
+          label: "审核通过",
+          value: "2",
+        },
+        {
+          label: "审核不通过",
+          value: "3",
+        },
+      ],
+    },
+    {
+      label: "产线类型",
+      prop: "flowStatus",
+      data: [
+        {
+          label: "审核中",
+          value: "1",
+        },
+        {
+          label: "审核通过",
+          value: "2",
+        },
+        {
+          label: "审核不通过",
+          value: "3",
+        },
+      ],
+    },
+  ];
+});
+const config = computed(() => {
+  return [
+    {
+      attrs: {
+        label: "车间名称",
+        prop: "type",
+        width: 120,
+        render(type) {
+          return "华为";
+        },
+      },
+    },
+    {
+      attrs: {
+        label: "产线类型",
+        prop: "name",
+        width: 150,
+      },
+    },
+    {
+      attrs: {
+        label: "产线名称",
+        prop: "endPoint",
+        width: 100,
+      },
+    },
+    {
+      attrs: {
+        label: "负责人",
+        prop: "endPoint",
+        width: 100,
+      },
+    },
+    {
+      attrs: {
+        label: "产线说明",
+        prop: "accessKeyId",
+      },
+    },
+
+    {
+      attrs: {
+        label: "操作",
+        width: "200",
+        align: "right",
+      },
+      // 渲染 el-button,一般用在最后一列。
+      renderHTML(row) {
+        return [
+          {
+            attrs: {
+              label: "修改",
+              type: "primary",
+              text: true,
+            },
+            el: "button",
+            click() {
+              getDtl(row);
+            },
+          },
+          {
+            attrs: {
+              label: "删除",
+              type: "danger",
+              text: true,
+            },
+            el: "button",
+            click() {
+              // 弹窗提示是否删除
+              ElMessageBox.confirm(
+                "此操作将永久删除该数据, 是否继续?",
+                "提示",
+                {
+                  confirmButtonText: "确定",
+                  cancelButtonText: "取消",
+                  type: "warning",
+                }
+              ).then(() => {
+                // 删除
+                proxy
+                  .post("/tdaConfig/delete", {
+                    id: row.id,
+                  })
+                  .then((res) => {
+                    ElMessage({
+                      message: "删除成功",
+                      type: "success",
+                    });
+                    getList();
+                  });
+              });
+            },
+          },
+        ];
+      },
+    },
+  ];
+});
+
+let formData = reactive({
+  data: {
+    type: "1",
+  },
+  treeData: [],
+});
+const formOption = reactive({
+  inline: true,
+  labelWidth: 100,
+  itemWidth: 100,
+  rules: [],
+});
+const byform = ref(null);
+const treeData = ref([]);
+const formConfig = computed(() => {
+  return [
+    {
+      type: "select",
+      prop: "name",
+      label: "车间名称",
+      required: true,
+      data: [],
+    },
+    {
+      type: "select",
+      prop: "name",
+      label: "产线类型",
+      required: true,
+      data: [],
+    },
+    {
+      type: "input",
+      prop: "aa",
+      label: "产线名称",
+      required: true,
+    },
+    {
+      type: "select",
+      prop: "name",
+      label: "负责人",
+      data: [],
+    },
+    {
+      type: "input",
+      prop: "secretAccessKey",
+      label: "产线说明",
+      itemType: "textarea",
+    },
+  ];
+});
+const getList = async (req) => {
+  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
+  loading.value = true;
+  proxy.post("/tdaConfig/page", sourceList.value.pagination).then((message) => {
+    console.log(message);
+    sourceList.value.data = message.rows;
+    sourceList.value.pagination.total = message.total;
+    setTimeout(() => {
+      loading.value = false;
+    }, 200);
+  });
+};
+const openModal = () => {
+  dialogVisible.value = true;
+  modalType.value = "add";
+  formData.data = {};
+};
+const selection = ref({
+  data: [],
+});
+const select = (_selection, row) => {
+  selection.value.data = _selection;
+  console.log(_selection.length);
+};
+const submitForm = () => {
+  console.log(byform.value);
+  byform.value.handleSubmit((valid) => {
+    submitLoading.value = true;
+    proxy.post("/tdaConfig/" + modalType.value, formData.data).then((res) => {
+      ElMessage({
+        message: modalType.value == "add" ? "添加成功" : "编辑成功",
+        type: "success",
+      });
+      dialogVisible.value = false;
+      submitLoading.value = false;
+      getList();
+    });
+  });
+};
+
+const getDtl = (row) => {
+  modalType = "edit";
+  proxy.post("/tdaConfig/detail", { id: row.id }).then((res) => {
+    formData.data = res;
+    console.log(formData);
+    dialogVisible.value = true;
+  });
+};
+
+// getList();
+</script>
+  
+<style lang="scss" scoped>
+.tenant {
+  padding: 20px;
+}
+</style>