修改设备管理优化筛选

2023-06-19 17:44:53 +08:00 · 2023-06-19 17:44:53 +08:00 · 9119bab756
commit 9119bab756
parent fefb9f70e9
3 changed files with 117 additions and 71 deletions
--- a/src/store/modules/device.js
+++ b/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
--- a/src/views/big/device/components/add_edit.vue
+++ b/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 { getDeviceList, addDevice, updateDevice } from '@/api/big/device'
-import { getDeptList } from '@/api/big/dept'
-import { getDeviceTypeList } from '@/api/big/deviceType'
+import { ref, watch, getCurrentInstance,computed } from 'vue'
+import { addDevice, updateDevice } from '@/api/big/device'
 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 typeList = ref([])
-const deptList = ref([])
+const getwayList = computed(() => store.getwayList)
+const typeList = computed(() => store.typeList)
+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>
   
--- a/src/views/big/device/index.vue
+++ b/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"
-                    @keyup.enter="handleQuery" />
+                <!-- <el-input v-model="queryParams.type" placeholder="请输入设备类型" clearable style="width: 200px"
+                    @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>