新增页面

src/views/govern/device/disposition/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="default-main device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
         <GetMarketList @node-click="selectUser" @selectUser="selectUser"></GetMarketList>
-        <div class="device-manage-right" :style="{ height: tableHeight }">
+        <div class="device-manage-right" :style="{ height: pageHeight.height }">
             <el-descriptions title="用户基本信息" class="mb10" :column="2" border>
                 <template #extra>
                     <el-button type="primary" icon="el-icon-Plus" @click="getMarketEnginner">添加工程</el-button>
@@ -13,12 +13,13 @@
                     {{ user.phone }}
                 </el-descriptions-item>
             </el-descriptions>
-            <vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" style="width: 100%">
-                <vxe-column field="engineerName" title="工程名称"></vxe-column>
+            <div :style="{ height: tableHeight.height }">
+                <vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" style="width: 100%">
+                    <vxe-column field="engineerName" title="工程名称"></vxe-column>
 
-                <vxe-column  title="操作">
-                    <template v-slot:default="scoped">
-                        <el-button
+                    <vxe-column title="操作" width="200px">
+                        <template v-slot:default="scoped">
+                            <el-button
                                 size="small"
                                 type="danger"
                                 icon="el-icon-Delete"
@@ -26,10 +27,45 @@
                             >
                                 移除
                             </el-button>
-                    </template>
-                </vxe-column>
-            </vxe-table>
+                        </template>
+                    </vxe-column>
+                </vxe-table>
+            </div>
         </div>
+        <el-dialog v-model="dialogVisible" title="添加工程" width="30%" :close-on-click-modal="false">
+            <el-input
+                v-model="filterText"
+                icon="el-icon-Search"
+                placeholder="请输入内容"
+                clearable
+                style="margin-bottom: 10px"
+            >
+                <template #prefix>
+                    <Icon name="el-icon-Search" style="font-size: 16px" />
+                </template>
+            </el-input>
+
+            <vxe-table
+                ref="tableRef"
+                v-bind="defaultAttribute"
+                :data="
+                    tableData2.filter((item:any) => {
+                        return item.name.includes(filterText)
+                    })
+                "
+                height="500px"
+                style="width: 100%"
+            >
+                <vxe-column type="checkbox" width="60"></vxe-column>
+                <vxe-column field="name" title="工程名称"></vxe-column>
+            </vxe-table>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="dialogVisible = false">取 消</el-button>
+                    <el-button type="primary" @click="addMarketData">确 定</el-button>
+                </span>
+            </template>
+        </el-dialog>
     </div>
 </template>
 
@@ -40,15 +76,20 @@ defineOptions({
 import { defaultAttribute } from '@/components/table/defaultAttribute'
 import GetMarketList from '@/components/tree/govern/getMarketList.vue'
 import { mainHeight } from '@/utils/layout'
-import { queryByUseId } from '@/api/cs-harmonic-boot/datatrend'
+import { queryByUseId, add, removeMarketData, queryEnginnerByUseId } from '@/api/cs-device-boot/user'
 import { ref, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
 
 const pageHeight = mainHeight(20)
 const loading = ref(true)
 
-const tableHeight = mainHeight(20).height
+const tableHeight = mainHeight(140)
 const user: any = ref({})
 const tableData = ref([])
+const tableData2 = ref([])
+const dialogVisible = ref(false)
+const filterText = ref('')
+const tableRef = ref()
 
 const selectUser = (e: any) => {
     user.value = e
@@ -60,11 +101,56 @@ const selectUser = (e: any) => {
         tableData.value = res.data
     })
 }
-const getMarketEnginner = () => {}
-const deleteEngineering = (row:any) => {}
+const getMarketEnginner = () => {
+    filterText.value = ''
+
+    queryEnginnerByUseId({ userId: user.value.id }).then(res => {
+        tableData2.value = res.data
+        dialogVisible.value = true
+        setTimeout(() => {
+            tableRef.value.clearCheckboxRow()
+        }, 0)
+    })
+}
+const deleteEngineering = (row: any) => {
+    ElMessageBox.confirm('是否移出该工程?', '请确认', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning'
+    }).then(() => {
+        removeMarketData({ ids: row.id }).then((res: any) => {
+            ElMessage.success(res.message)
+            selectUser(user.value)
+        })
+    })
+}
+const addMarketData = () => {
+    const table = tableRef.value.getCheckboxRecords()
+
+    if (table.length === 0) {
+        ElMessage.warning('请选择要添加的工程')
+    }
+    let form: any = tableData.value.map((item: any) => {
+        return {
+            engineerId: item.engineerId,
+            userId: user.value.id
+        }
+    })
+    table.forEach((item: any) => {
+        form.push({
+            engineerId: item.id,
+            userId: user.value.id
+        })
+    })
+    add(form).then((res: any) => {
+        ElMessage.success(res.message)
+        selectUser(user.value)
+        dialogVisible.value = false
+    })
+}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .device-manage {
     display: flex;