no message

src/api/riskPrevention/planManage.ts

@@ -150,3 +150,47 @@ export function getResponseRecordList(params) {
     params: params
   });
 }
+
+/////////////
+export const getUnitList = (params) => {
+  return request({
+    url: '/api/emergency_plan/unit/list',
+    method: 'get',
+    params: params
+  });
+};
+
+// 新增职责记录
+export const addUnit = (data) => {
+  return request({
+    url: '/api/emergency_plan/unit/create',
+    method: 'post',
+    data: data
+  });
+};
+
+// 修改职责记录
+export const updateUnit = (data) => {
+  return request({
+    url: '/api/emergency_plan/unit/update',
+    method: 'put',
+    data: data
+  });
+};
+
+// 职责详情
+export const getUnitDetail = (unitId) => {
+  return request({
+    url: '/api/emergency_plan/unit/' + unitId,
+    method: 'get'
+  });
+};
+
+// 删除职责记录
+export const deleteUnit = (data) => {
+  return request({
+    url: '/api/emergency_plan/unit/delete',
+    method: 'delete',
+    data: data
+  });
+};

src/types/components.d.ts

@@ -60,6 +60,7 @@ declare module 'vue' {
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElTree: typeof import('element-plus/es')['ElTree']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     Hamburger: typeof import('./../components/Hamburger/index.vue')['default']

src/views/riskPrevention/planManage/UnitRecord.vue

@@ -0,0 +1,203 @@
+<template>
+  <el-card shadow="hover">
+    <template #header>
+      <el-row :gutter="10">
+        <el-col :span="1.5">
+          <el-button type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button type="danger" plain :disabled="multiple" icon="Delete" @click="handleDelete(null)"> 删除 </el-button>
+        </el-col>
+      </el-row>
+    </template>
+
+    <el-table
+      v-loading="loading"
+      :default-sort="{ prop: 'startTime,endTime', order: 'descending' }"
+      :data="dataList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="50" align="center" />
+      <el-table-column label="单位名称" width="200" align="center" prop="dept_name" :show-overflow-tooltip="true" />
+      <el-table-column label="职能说明" align="left" prop="content" :show-overflow-tooltip="true" />
+      <el-table-column label="操作" width="150" align="center">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">编辑</el-button>
+          <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > queryParams.pageSize"
+      v-model:page="queryParams.page"
+      v-model:limit="queryParams.pageSize"
+      :total="total"
+      @pagination="getList"
+    />
+  </el-card>
+  <!-- 添加或修改培训记录配置对话框 -->
+  <el-dialog ref="formDialogRef" v-model="visible" :title="title" width="500px" append-to-body>
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
+      <el-form-item label="单位名称" prop="dept_id">
+        <el-select v-model="form.dept_id" placeholder="请选择单位">
+          <el-option v-for="item in depts" :key="item.deptId" :label="item.deptName" :value="item.deptId"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="职能说明" prop="content">
+        <el-input v-model="form.content" type="textarea" placeholder="请输入职能说明"></el-input>
+      </el-form-item>
+      <el-form-item label="排序" prop="dept_order">
+        <el-input v-model="form.dept_order" placeholder="请输入排序" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import {listDept} from '@/api/system/dept';
+import {
+  getUnitList,
+  addUnit,
+  updateUnit,
+  getUnitDetail,
+  deleteUnit
+} from '@/api/riskPrevention/planManage';
+import { to } from 'await-to-js';
+import { ref } from 'vue';
+
+const props = defineProps({
+  id: String
+});
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const depts = ref([]);
+const formRef = ref<ElFormInstance>();
+const ids = ref<string[]>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const selectedRow = ref(null);
+const dataList = ref([]);
+const loading = ref(true);
+let visible = ref(false);
+let buttonLoading = ref(false);
+let title = ref('');
+
+const queryParams = reactive({
+  page: 1,
+  pageSize: 10
+});
+
+const form = ref({
+  id: '',
+  dept_id: '',
+  dept_name: '',
+  content: '',
+  dept_order: 0
+});
+
+const rules = reactive({
+  dept_id: [{ required: true, message: '单位名称不能为空', trigger: 'blur' }],
+  content: [{ required: true, message: '职能说明不能为空', trigger: 'blur' }]
+});
+
+// 获取列表数据
+const getList = async() => {
+  loading.value = true;
+  const res = await listDept();
+  depts.value = res.data;
+  getUnitList({ ...queryParams, plan_id: props.id })
+    .then((res) => {
+      dataList.value = res.data;
+      total.value = res.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+
+watch(
+  () => props.id,
+  () => {
+    if (props.id) {
+      getList();
+    }
+  },
+  {
+    immediate: true
+  }
+);
+
+/** 取消按钮 */
+const cancel = () => {
+  resetForm();
+  visible.value = false;
+};
+
+const resetForm = () => {
+  form.value = {
+    id: '',
+    dept_id: '',
+    dept_name: '',
+    content: '',
+    dept_order: 0
+  };
+  formRef.value?.resetFields();
+  formRef.value?.clearValidate();
+};
+
+const handleUpdate = async (row) => {
+  if (row) {
+    resetForm();
+    const res = await getUnitDetail(row.id);
+    form.value = res.data;
+    visible.value = true;
+    title.value = '修改单位职能记录';
+  }
+};
+
+const handleAdd = () => {
+  resetForm();
+  visible.value = true;
+  title.value = '添加单位职能记录';
+};
+
+/**提交按钮 */
+const submitForm = () => {
+  formRef.value?.validate(async (valid) => {
+    if (valid) {
+      try {
+        buttonLoading.value = true;
+        form.value.id ? await updateUnit({ ...form.value, plan_id: props.id }) : await addUnit({ ...form.value, plan_id: props.id });
+        proxy?.$modal.msgSuccess(form.value.id ? '修改成功' : '新增成功');
+        visible.value = false;
+        getList();
+      } finally {
+        buttonLoading.value = false;
+      }
+    }
+  });
+};
+
+const handleSelectionChange = (selection) => {
+  ids.value = selection.map((item) => item.id);
+  selectedRow.value = selection.length === 1 ? selection[0] : null;
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+
+const handleDelete = async (row) => {
+  const deleteIds = row && row.id ? [row?.id] : ids.value;
+  const [err] = await to(proxy?.$modal.confirm('是否确认删除选择的单位职能记录？') as any);
+  if (!err) {
+    await deleteUnit({ids: deleteIds});
+    getList();
+    proxy?.$modal.msgSuccess('删除成功');
+  }
+};
+</script>

src/views/riskPrevention/planManage/planList.vue

@@ -98,6 +98,10 @@
           </el-tabs>
         </el-card>
       </el-col>
+      <el-col :lg="30" :xs="24">
+        <h3>单位职责</h3>
+        <UnitRecord :id="planId" />
+      </el-col>
       <el-col :lg="30" :xs="24">
         <!-- 培训记录 -->
         <h3>培训记录</h3>
@@ -156,6 +160,7 @@ import { deletePlan, getPlanDetail, updateReport } from '@/api/riskPrevention/pl
 import TrainingRecord from './TrainingRecord.vue';
 import DrillRecord from './DrillRecord.vue';
 import ResponseRecord from './ResponseRecord.vue';
+import UnitRecord from './UnitRecord.vue';
 
 const router = useRouter();