feat:单位管理

src/views/basic/empDept/index.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="app-container">
+    <el-card class="first-card" ref='firstCard' shadow="always">
+      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" @submit.native.prevent>
+        <el-form-item label="单位名称" prop="name">
+          <el-input v-model="queryParams.name" placeholder="请输入单位名称" clearable @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="单位类型" prop="type">
+          <el-select v-model="queryParams.type" placeholder="请选择单位类型" clearable filterable @change="handleQuery">
+            <el-option v-for="t in deptTypes" :key="t.value" :label="t.label" :value="t.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
+        </el-col>
+        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+    </el-card>
+    <div class="el-card-p card-shadow carder-border mt10 pad10 ">
+      <el-table v-table-height v-loading="loading" :data="empDeptData" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" :align="alignment" v-if="false" />
+        <el-table-column type="index" width="55" label="序号" :align="alignment" />
+        <el-table-column label="单位名称" :align="alignment" prop="name" />
+        <el-table-column label="单位类型" :align="alignment" prop="type">
+          <template #default="scope">
+            <span v-if="scope.row.type == 0">管理单位</span>
+            <span v-if="scope.row.type == 1">运维单位</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="单位地址" :align="alignment" prop="addr" />
+        <el-table-column label="单位联系人" :align="alignment" prop="contacts" />
+        <el-table-column label="联系人电话" :align="alignment" prop="phone" />
+        <el-table-column label="操作" :align="alignment" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-button type="text" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['basic:warnlevel:edit']">修改</el-button>
+            <el-button text type="danger" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['basic:warnlevel:remove']">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.limit" @pagination="getList" />
+    </div>
+
+    <!-- 添加或修改警戒水位信息对话框 -->
+    <el-dialog class="custom-dialog" :title="title" v-model="open" width="700px" append-to-body>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
+        <el-form-item label="单位类型" prop="type">
+          <el-select v-model="form.type" placeholder="请选择单位类型" filterable>
+            <el-option v-for="t in deptTypes" :key="t.value" :label="t.label" :value="t.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="单位名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入单位名称" />
+        </el-form-item>
+        <el-form-item label="单位地址" prop="contacts">
+          <el-input v-model="form.addr" placeholder="请输入单位地址" />
+        </el-form-item>
+        <el-form-item label="单位联系人" prop="contacts">
+          <el-input v-model="form.contacts" placeholder="请输入单位联系人" />
+        </el-form-item>
+        <el-form-item label="联系人电话" prop="phone">
+          <el-input v-model="form.phone" placeholder="请输入联系人电话" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm(formRef)" v-loading='btnLoading'>确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+  import { ref, reactive, onMounted, getCurrentInstance, watch } from 'vue'
+  import dayjs from 'dayjs'
+
+  const { proxy } = getCurrentInstance()
+
+  // 基本响应式数据
+  const alignment = 'center'
+  const showSearch = ref(true)
+  const loading = ref(false)
+  const btnLoading = ref(false)
+  const total = ref(0)
+  const empDeptData = ref([])
+  const open = ref(false)
+  const title = ref("")
+  const isBatch = ref(false)
+  const deptTypes = [
+    { label: '管理单位', value: 0 },
+    { label: '运维单位', value: 1 }
+  ]
+  // 查询参数
+  const queryParams = reactive({
+    page: 1,
+    limit: 10,
+    name: '',
+    type: "",
+  })
+
+  // 表单数据
+  const form = ref({})
+
+  // 表单验证规则
+  const rules = reactive({
+    stnmId: [{ required: true, message: '请选择测站', trigger: 'change' }],
+    value: [{ required: true, message: '请输入阈值', trigger: 'blur' }]
+  })
+
+  // 多选相关
+  const ids = ref([])
+  const names = ref([])
+  const single = ref(true)
+  const multiple = ref(true)
+
+  // 获取列表数据
+  const getList = async () => {
+    loading.value = true
+    try {
+      const res = await proxy.axiosGet('/message/employeeDept/list', queryParams)
+      if (res.code == 0) {
+        empDeptData.value = res.data
+        total.value = res.count
+      }
+    } catch (error) {
+      console.error(error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+
+
+  // 搜索和重置
+  const handleQuery = () => {
+    queryParams.page = 1
+    getList()
+  }
+
+  const resetQuery = () => {
+    proxy.resetForm("queryForm")
+    handleQuery()
+  }
+
+  // 多选处理
+  const handleSelectionChange = (selection) => {
+    ids.value = selection.map(item => item.id)
+    names.value = selection.map(item => item.name)
+    single.value = selection.length !== 1
+    multiple.value = !selection.length
+  }
+
+  // 新增操作
+  const handleAdd = () => {
+    reset()
+    open.value = true
+    title.value = "添加单位信息"
+  }
+
+  // 修改操作
+  const handleUpdate = (row) => {
+    form.value = JSON.parse(JSON.stringify(row))
+    console.log(form.value, row, '====')
+    open.value = true
+    title.value = "修改单位信息"
+  }
+  // 删除操作
+  const handleDelete = (row) => {
+    const stnms = row.name || names.value.join(',')
+    const stnmIds = row.id || ids.value.join(',')
+    proxy.$modal.confirm('是否确认删除站点名称为"' + stnms + '"的数据项？')
+      .then(async () => {
+        const res = await proxy.axiosDelete('message/employeeDept/delete/' + stnmIds)
+        if (res.code === 0) {
+          proxy.$modal.msgSuccess("删除成功")
+          getList()
+        }
+      })
+  }
+
+
+  // 表单操作
+  const formRef = ref(null)
+
+  const cancel = () => {
+    open.value = false
+    reset()
+  }
+
+  const reset = () => {
+    form.value = {
+      id: null,
+      type: "",
+      name: "",
+      addr: "",
+      contacts: "",
+      phone: "",
+    }
+    proxy.resetForm("formRef")
+  }
+
+  // 提交表单
+  const submitForm = async (formEl) => {
+    if (!formEl) return
+    await formEl.validate(async (valid) => {
+      if (valid) {
+        if (form.value.id != null) {
+          await editMethod()
+        } else {
+          await addMethod()
+        }
+      }
+    })
+  }
+  // 添加方法
+  const addMethod = async () => {
+    btnLoading.value = true
+    try {
+      const res = await proxy.axiosPost('message/employeeDept/add', form.value)
+      if (res.code === 0) {
+        proxy.$modal.msgSuccess("新增成功")
+        open.value = false
+        getList()
+      }
+    } catch (error) {
+      console.error(error)
+    } finally {
+      btnLoading.value = false
+    }
+  }
+
+  // 编辑方法
+  const editMethod = async () => {
+    btnLoading.value = true
+    try {
+      const res = await proxy.axiosPost('message/employeeDept/edit', form.value)
+      if (res.code === 0) {
+        proxy.$modal.msgSuccess("修改成功")
+        open.value = false
+        getList()
+      }
+    } catch (error) {
+      console.error(error)
+    } finally {
+      btnLoading.value = false
+    }
+  }
+
+
+  // 初始化
+  onMounted(() => {
+    getList()
+  })
+</script>