修改设备管理 优化筛选

src/store/modules/device.js

@@ -0,0 +1,23 @@
+
+const useDeviceStore = defineStore(
+  'device',
+  {
+    state: () => ({
+        getwayList:[],
+        deptList:[],
+        typeList:[]
+    }),
+    actions: {
+        setGetwayList(list){
+            this.getwayList = list;
+        },
+        setDeptList(list){
+            this.deptList = list;
+        },
+        setTypeList(list){
+            this.typeList = list;
+        }
+    }
+  })
+
+export default useDeviceStore

src/views/big/device/components/add_edit.vue

@@ -40,17 +40,27 @@
                 <el-form-item label="图片">
                     <ImageUpload v-model="prop.form.image" :limit="1" />
                 </el-form-item>
+
+                <el-form-item label="装配组">
+                    <el-input v-model="prop.form.assemblyGroup" placeholder="装配组" />
+                </el-form-item>
+                <el-form-item label="电装组">
+                    <el-input v-model="prop.form.electricGroup" placeholder="电装组" />
+                </el-form-item>
+                <el-form-item label="检验员">
+                    <el-input v-model="prop.form.inspector" placeholder="检验员" />
+                </el-form-item>
             </el-form>
         </div>
     </base-dialog>
 </template>
 
 <script setup>
-import { ref, watch, getCurrentInstance } from 'vue'
+import { ref, watch, getCurrentInstance,computed } from 'vue'
-import { getDeviceList, addDevice, updateDevice } from '@/api/big/device'
+import { addDevice, updateDevice } from '@/api/big/device'
-import { getDeptList } from '@/api/big/dept'
-import { getDeviceTypeList } from '@/api/big/deviceType'
 import ImageUpload from '@/components/ImageUpload/index.vue'
+import useDeviceStore from '@/store/modules/device'
+const store = useDeviceStore()
 
 
 const prop = defineProps({
@@ -87,9 +97,9 @@ const rule = {
     ]
 }
 const { proxy: ctx } = getCurrentInstance()
-const getwayList = ref([])
+const getwayList = computed(() => store.getwayList)
-const typeList = ref([])
+const typeList = computed(() => store.typeList)
-const deptList = ref([])
+const deptList = computed(() => store.deptList)
 const handleClose = () => {
     //baseFormRef.value.reset()
     emit('closeDialog')
@@ -97,53 +107,6 @@ const handleClose = () => {
 }
 
 
-//获取设备类型列表
-function remoteMethodTypeId() {
-    getDeviceTypeList({ pageSize: 100 }).then(res => {
-        if (res.code === 200) {
-            typeList.value = res.rows.map(item => {
-                return {
-                    label: item.name,
-                    value: item.id
-                }
-            })
-        }
-    })
-}
-
-//获取部门列表
-function remoteMethodDeptId() {
-    getDeptList({ pageSize: 100 }).then(res => {
-        if (res.code === 200) {
-            deptList.value = res.rows.map(item => {
-                return {
-                    label: item.name,
-                    value: item.id
-                }
-            })
-        }
-    })
-}
-//获取网关列表
-function remoteMethodGetwayId() {
-    getDeviceList({ pageSize: 100, type: '网关' }).then(res => {
-        if (res.code === 200) {
-            getwayList.value = res.rows.map(item => {
-                return {
-                    label: item.name,
-                    value: item.id
-                }
-            })
-        }
-    })
-}
-
-// 获取表单选项
-function getAddFormOptions() {
-    remoteMethodTypeId()
-    remoteMethodDeptId()
-    remoteMethodGetwayId()
-}
 
 // 弹窗弹出
 const handleOpen = () => {
@@ -200,7 +163,7 @@ const handleConfirm = () => {
     addDeductionInfo()
 }
 
-getAddFormOptions()
+
 
 </script>
    

src/views/big/device/index.vue

@@ -10,8 +10,12 @@
                     @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="设备类型" prop="type">
-                <el-input v-model="queryParams.type" placeholder="请输入设备类型" clearable style="width: 200px"
+                <!-- <el-input v-model="queryParams.type" placeholder="请输入设备类型" clearable style="width: 200px"
-                    @keyup.enter="handleQuery" />
+                    @keyup.enter="handleQuery" /> -->
+                    <el-select v-model="queryParams.type" value-key="label" style="width: 200px" filterable placeholder="选择设备类型" @keyup.enter="handleQuery">
+                        <el-option value="" label="请选择"></el-option>
+                        <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.label" />
+                    </el-select>
             </el-form-item>
             <el-form-item label="部门名称" prop="dept">
                 <el-input v-model="queryParams.dept" placeholder="请输入部门名称" clearable style="width: 200px"
@@ -39,7 +43,7 @@
         </el-row>
 
         <!-- 表格数据 -->
-        <el-table v-loading="loading" :data="deptList" @selection-change="handleSelectionChange">
+        <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange">
             <el-table-column type="selection" width="55" align="center" />
             <el-table-column label="序号" type="index" width="120" />
             <!-- <el-table-column label="部门id" prop="id" width="120" /> -->
@@ -56,10 +60,10 @@
             </el-table-column>
             <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
                 <template #default="scope">
-                    <el-tooltip content="装配信息" placement="top" v-if="scope.row.roleId !== 1">
+                    <!-- <el-tooltip content="装配信息" placement="top" v-if="scope.row.roleId !== 1">
                         <el-button link type="primary" v-hasPermi="['big:device:update']" icon="Document"
                             @click="handleAssembly(scope.row)"></el-button>
-                    </el-tooltip>
+                    </el-tooltip> -->
                     <el-tooltip content="修改" placement="top" v-if="scope.row.roleId !== 1">
                         <el-button link type="primary" v-hasPermi="['big:device:update']" icon="Edit"
                             @click="handleUpdate(scope.row.id)"></el-button>
@@ -77,7 +81,7 @@
 
         <add_edit @closeDialog="open = false" :type="type" :title="title" :form="form" :visible="open"
             @refreshTable="getList" />
-        <assemblyVue @closeDialog="assemblyOpen = false" :title="assemblyTitle" :visible="assemblyOpen"></assemblyVue>
+        <!-- <assemblyVue @closeDialog="assemblyOpen = false" :title="assemblyTitle" :visible="assemblyOpen"></assemblyVue> -->
         <el-dialog v-model="imgDialogVisible">
             <img w-full :src="dialogImageUrl" alt="Preview Image" class="img-preview" />
         </el-dialog>
@@ -85,14 +89,15 @@
 </template>
   
 <script setup>
-import { ref, reactive, toRefs, getCurrentInstance } from 'vue'
+import { ref, reactive, toRefs, getCurrentInstance, onMounted } from 'vue'
 import { Picture as IconPicture } from '@element-plus/icons-vue'
 import { getDeviceList, delDevice } from '@/api/big/device'
 import { getDeptList } from '@/api/big/dept'
 import { getDeviceTypeList } from '@/api/big/deviceType'
+import useDeviceStore from '@/store/modules/device'
 import add_edit from './components/add_edit.vue'
 import assemblyVue from './components/assembly'
-
+const store = useDeviceStore()
 const { proxy } = getCurrentInstance();
 const data = reactive({
     form: {},
@@ -112,7 +117,7 @@ const { queryParams, form } = toRefs(data);
 //  alert(JSON.stringify(res))
 // })
 
-let deptList = ref([])
+let deviceList = ref([])
 
 const imgDialogVisible = ref(false)
 const dialogImageUrl = ref('')
@@ -129,14 +134,14 @@ const file_list = ref([])
 const type = ref("add");
 const assemblyTitle = ref("设备装配信息")
 const assemblyOpen = ref(false)
-
+const typeList = ref([])
-/** 查询部门列表 */
+/** 查询设备列表 */
 function getList() {
     loading.value = true;
     // console.log(JSON.stringify(queryParams.value));
     getDeviceList(queryParams.value).then(res => {
         loading.value = false;
-        deptList.value = res.rows;
+        deviceList.value = res.rows;
         total.value = res.total;
     });
 
@@ -171,7 +176,7 @@ function handleAdd() {
 /** 修改部门 */
 function handleUpdate(id) {
     title.value = "修改设备类型";
-    deptList.value.find(item => {
+    deviceList.value.find(item => {
         if (item.id == id) {
             form.value = item;
         }
@@ -197,7 +202,7 @@ function handleAssembly(row) {
 
 /** 删除按钮操作 */
 function handleDelete(row) {
-    let rows = deptList.value.filter(item => ids.value.includes(item.id));
+    let rows = deviceList.value.filter(item => ids.value.includes(item.id));
     const names = row.name || rows.map(item => item.name).join(',');
     const deviceTypeIds = row.id || ids.value.join(',');
     proxy.$modal.confirm('是否确认删除名称为"' + names + '"的数据项？').then(function () {
@@ -224,7 +229,62 @@ const handlePreview = (img) => {
     dialogImageUrl.value = img;
 }
 
+
+//获取设备类型列表
+function remoteMethodTypeId() {
+    getDeviceTypeList({ pageSize: 100 }).then(res => {
+        if (res.code === 200) {
+            typeList.value = res.rows.map(item => {
+                return {
+                    label: item.desc,
+                    value: item.id
+                }
+            })
+            store.setTypeList(typeList.value)
+        }
+    })
+}
+
+//获取部门列表
+function remoteMethodDeptId() {
+    getDeptList({ pageSize: 100 }).then(res => {
+        if (res.code === 200) {
+            let deptList = res.rows.map(item => {
+                return {
+                    label: item.name,
+                    value: item.id
+                }
+            })
+            store.setDeptList(deptList)
+        }
+    })
+}
+//获取网关列表
+function remoteMethodGetwayId() {
+    getDeviceList({ pageSize: 100, type: '网关' }).then(res => {
+        if (res.code === 200) {
+            let getwayList = res.rows.map(item => {
+                return {
+                    label: item.name,
+                    value: item.id
+                }
+            })
+            store.setGetwayList(getwayList)
+        }
+    })
+}
+
+// 获取表单选项
+function getAddFormOptions() {
+    remoteMethodTypeId()
+    remoteMethodDeptId()
+    remoteMethodGetwayId()
+}
+onMounted(() => {
     getList();
+    getAddFormOptions()
+})
+
 </script>
   
 <style lang="scss" scoped>