【专题设置】画面

src/api/sys/ThematicSetting.ts

@@ -0,0 +1,28 @@
+import { defHttp } from '@/utils/http/axios';
+enum Api{
+  LoadPage = '/api/DroneCaseinfo/LoadCaseTopic',
+  GetTopicRelevance = '/api/DroneCaseinfo/LoadTopicRelevance',
+  GetCaseTypeList = '/api/SysDataItemDetail/Load',
+  GetRoleList = '/api/Roles/LoadPage',
+  AddTopicCaseType = '/api/DroneCaseinfo/AddTopicCaseType',
+  AddTopicRole = '/api/DroneCaseinfo/AddTopicRole'
+}
+export function LoadPage(params) {
+  return defHttp.get({ url: Api.LoadPage, params });
+}
+export function GetTopicRelevance(params){
+  return defHttp.get({ url: Api.GetTopicRelevance, params });
+}
+export function GetCaseTypeList(params){
+  params = {...params,code:'DRONE_CASE_TYPE'}
+  return defHttp.get({ url: Api.GetCaseTypeList, params });
+}
+export function GetRoleList(params){
+  return defHttp.get({ url: Api.GetRoleList, params });
+}
+export function AddTopicCaseType(params){
+  return defHttp.post({ url: Api.AddTopicCaseType, params });
+}
+export function AddTopicRole(params){
+  return defHttp.post({ url: Api.AddTopicRole, params });
+}

src/views/demo/ThematicSetting/UseModal/index.vue

@@ -1,28 +1,17 @@
 <template>
    <div class="thematicSetting-modal-container">
-    <a-form
-      ref="formRef"
-      :model="props.modalData.data"
-      :rules="rules"
-      labelAlign="right"
-      :label-col="{ span: 5 }">
-      <a-form-item label="专题名称" name="topicName">
-        <a-input v-model:value="props.modalData.data.topicName" />
-      </a-form-item>
-      <a-form-item label="案件类型" name="caseTypes">
-        <a-select
-          v-model:value="props.modalData.data.caseTypes"
-          mode="tags"
-          style="width: 100%"
-          placeholder="Tags Mode"
-          :options="options"
-          @change="handleChange"
-        ></a-select>
-      </a-form-item>
-      <a-form-item label="角色" name="users">
-        <a-input v-model:value="props.modalData.data.users" />
-      </a-form-item>
-    </a-form>
+      <BasicTable @register="registerTable" :rowKey="isCaseType? 'itemDetailId': 'id'">
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'enabledMark'">
+            <a-tag  v-if="record.enabledMark == 1" color="green">启用</a-tag>
+            <a-tag v-else color="red">禁用</a-tag>
+          </template>
+          <template v-else-if="column.key === 'status'">
+            <a-tag  v-if="record.status == 0" color="green">启用</a-tag>
+            <a-tag v-else color="red">禁用</a-tag>
+          </template>
+        </template>
+      </BasicTable>
     <div class="modal-footer">
       <a-button style="margin-right: 10px;" @click="closeModal">取消</a-button>
       <a-button type="primary" @click="submit">确定</a-button>
@@ -31,28 +20,80 @@
 </template>
 
 <script setup lang="ts">
-import {defineProps, defineEmits,onBeforeUnmount,ref} from "vue"
+import {defineProps, defineEmits,onMounted,onBeforeUnmount,ref,computed} from "vue"
+import { BasicTable, useTable } from '@/components/Table';
+import { GetTopicRelevance, GetCaseTypeList, GetRoleList, AddTopicCaseType, AddTopicRole } from '@/api/sys/ThematicSetting'
+import {caseTypesColumns,rolesColumns} from '../util'
+import {message} from 'ant-design-vue'
 const formRef = ref()
+const selectedList = ref([])
 const props = defineProps(["modalData"])
 const emit = defineEmits(['closeModal','submit'])
-const rules = {
-  topicName:[{ required: true, message: '专题名称不能为空', trigger: 'blur' },]
-}
+const isCaseType = computed(() => props.modalData.type === "bindCaseTypes")
+const [registerTable, {setSelectedRowKeys, getSelectRowKeys,clearSelectedRowKeys}] = useTable({
+  api:isCaseType.value? GetCaseTypeList: GetRoleList,
+  pagination:false,
+  showIndexColumn: false,
+  rowSelection: {
+    type: 'checkbox',
+  },
+  columns: isCaseType.value? caseTypesColumns: rolesColumns,
+  afterFetch:(res) => {
+    setSelectedRowKeys(selectedList.value)
+    if(!isCaseType.value){
+      res = res.map(item => {
+        return {
+          ...item,
+          id: item.id.toString(),
+        }
+      })
+    }
+    return res
+  }
+})
 const submit = () => {
-  formRef.value.validate().then(() => {
-    emit('submit')
-  }).catch(error => {
-    console.log('error', error)
-  })
+  if(isCaseType.value){
+    AddTopicCaseType({
+      topicId: props.modalData.topicId,
+      relevanceIds: getSelectRowKeys()
+    }).then(res => {
+      message.success('添加成功')
+      emit('submit')
+      closeModal()
+    }).catch(err => {
+      console.log(err)
+    })
+  }else{
+    AddTopicRole({
+      topicId: props.modalData.topicId,
+      relevanceIds: getSelectRowKeys()
+    }).then(res => {
+      message.success('添加成功')
+      emit('submit')
+      closeModal()
+    }).catch(err => {
+      console.log(err)
+    })
+  }
 }
 const closeModal = () => {
   emit('closeModal')
-  formRef?.value?.resetFields()
 }
 const clearModalData = () => {
   formRef?.value?.resetFields()
 }
+onMounted(() => {
+  GetTopicRelevance({
+    code:isCaseType.value? 'TopicCaseType': 'TopicRole',
+    topicId:props.modalData.topicId
+  }).then(res => {
+    selectedList.value = res
+  }).catch(err => {
+    console.log(err)
+  })
+})
 onBeforeUnmount(() => {
+  clearSelectedRowKeys()
   clearModalData()
 })
 </script>
@@ -65,4 +106,13 @@ onBeforeUnmount(() => {
     justify-content: flex-end;
     margin-top: 20px;
   }
-}</style>
+}
+</style>
+<style lang="scss">
+.thematicSetting-modal-container{
+  .ant-table-body{
+    height: initial !important;
+    max-height: 400px !important;
+  }
+}
+</style>

src/views/demo/ThematicSetting/index.vue

@@ -7,11 +7,13 @@
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'caseTypes'">
           <div class="cell">
-            <a-tag color="blue" style="margin-right: 4px;" v-for="(item,index) in record.caseTypes?.split(',')" :key="index">{{item}}</a-tag>
+            <a-tag color="blue" style="margin-right: 4px;" v-for="(item,index) in record.caseTypes" :key="index">{{item}}</a-tag>
           </div>
         </template>
-        <template v-else-if="column.key === 'users'">
-          <a-tag color="blue" style="margin-right: 4px;" v-for="(item,index) in record.users?.split(',')" :key="index">{{item}}</a-tag>
+        <template v-else-if="column.key === 'roles'">
+          <div class="cell">
+            <a-tag color="blue" style="margin-right: 4px;" v-for="(item,index) in record.roles" :key="index">{{item}}</a-tag>
+          </div>
         </template>
       </template>
     </BasicTable>
@@ -29,46 +31,35 @@ import { columns, tableSetting, emptyTopicItem } from './util.ts'
 import { LoadPage } from '@/api/sys/ThematicSetting'
 import { PermissionBtn } from '@/components/PermissionBtn/index';
 import { ref, reactive, } from "vue"
+import { message } from 'ant-design-vue';
 const openModal = ref(false)
 const modalData = reactive({
   title:'',
-  data:{},
+  topicId:'',
   type:'',
 })
 const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
   api:LoadPage,
   ...tableSetting,
+  afterFetch:(res) => {
+    return res.map(item => {
+      return {...item,caseTypes:item.caseTypes?.split(','),roles:item.roles?.split(',')}
+    })
+  }
 })
 const buttonClick = (type) => {
-  switch(type){
-    case 'add':
-      modalData.title = '新增'
-      modalData.type = 'add'
-      modalData.data = emptyTopicItem
-      openModal.value = true
-      break;
-    case 'edit':
-      if(getSelectRows().length !== 1){
-        return
-      }
-      modalData.title = '修改'
-      modalData.type = 'edit'
-      modalData.data = getSelectRows()[0]
-      openModal.value = true
-      break;
-    case 'delete':
-      if(getSelectRows().length !== 1){
-        return
-      }
-      modalData.title = '删除'
-      modalData.type = 'delete'
-      modalData.data = getSelectRows()[0]
-      openModal.value = true
-      break;
+  const row = getSelectRows()
+  if(row.length !== 1){
+    message.warning('请选择一条数据')
+    return
   }
+  modalData.title = type === 'bindCaseTypes'? '分配案件类型': '分配角色'
+  modalData.topicId = row[0].topicId
+  modalData.type = type
+  openModal.value = true
 }
 const submit = () => {
-
+  reload()
 }
 const closeModal = () => {
   openModal.value = false

src/views/demo/ThematicSetting/util.ts

@@ -41,6 +41,26 @@ export const tableSetting = {
 }
 export const emptyTopicItem = {
   topicName:'',
-  caseTypes:'',
-  users:'',
-}
+  caseTypes:[],
+  roles:[],
+}
+export const caseTypesColumns = [
+  {
+    title: '案件名称',
+    dataIndex: 'itemName',
+  },
+  {
+    title: '状态',
+    dataIndex: 'enabledMark',
+  },
+]
+export const rolesColumns = [
+  {
+    title: '角色名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+  }
+]