停车场人员分配

src/api/illegalconstruction/parkinglot.ts

@@ -10,6 +10,8 @@ enum Api {
   Update = '/api/MiParking/Update',
   // 删除
   Delete = '/api/MiParking/Delete',
+  // 分配用户
+  AllocateUser = '/api/MiParking/AllocateUser',
 }
 export function LoadAllPage(params) {
   return defHttp.get({
@@ -40,4 +42,10 @@ export function Delete(params) {
     url: Api.Delete,
     params,
   });
+}
+export function AllocateUser(params) {
+  return defHttp.post({
+    url: Api.AllocateUser,
+    params,
+  });
 }

src/views/demo/illegalconstruction/parkinglot/DistributeModal/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="modal-content">
+    <div class="content-item">
+      <div class="item-title">停车场名称</div>
+      <div class="item-title-value">{{ props.modalData.name }}</div>
+    </div>
+    <div class="content-item">
+      <div class="item-title">人员</div>
+      <div class="item-title-value">
+        <a-select
+          style="width: 100%"
+          v-model:value="selectUser"
+          :options="options"
+          mode="multiple"
+          maxTagCount="4"
+          placeholder="请选择人员"
+        ></a-select>
+      </div>
+    </div>
+    <div class="button-div">
+      <a-button style="margin-right: 10px;" @click="cancel">取消</a-button>
+      <a-button type="primary" @click="submit">确定</a-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, onMounted, ref } from "vue";
+import { getUserList } from '@/api/demo/system.ts'
+import { AllocateUser } from '@/api/illegalconstruction/parkinglot.ts'
+import { message } from "ant-design-vue";
+onMounted(() => {
+  let params = {
+    page: 1,
+    limit: 1000
+  }
+  if(props.modalData.userList){
+    selectUser.value = props.modalData.userList
+  }
+  getUserList(params).then(res => {
+    options.value = res.items.map(item => {
+      return {
+        label: item.name,
+        value: item.id
+      }
+    })
+  })
+})
+const props = defineProps(['modalData']);
+const emits = defineEmits(['closeDistributeModal'])
+const selectUser = ref([])
+const options = ref([])
+
+const cancel = () => {
+  emits('closeDistributeModal')
+}
+const submit = () => {
+  let params = {
+    parkingId: props.modalData.id,
+    userId: selectUser.value
+  }
+  AllocateUser(params).then(res => {
+    message.success('分配成功')
+    emits('closeDistributeModal')
+  }).catch(() => {
+    message.error('分配失败')
+  })
+}
+
+</script>
+
+<style lang="scss" scoped>
+.modal-content{
+  padding: 20px;
+  .content-item{
+    display: flex;
+    margin-bottom: 10px;
+    align-items: center;
+    .item-title{
+      width: 80px;
+      text-align: right;
+      margin-right: 20px;
+    }
+    .item-title-value{
+      font-weight: 600;
+      flex: 1;
+    }
+  }
+  .button-div{
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>

src/views/demo/illegalconstruction/parkinglot/index.vue

@@ -13,6 +13,9 @@
     <a-modal v-model:open="addOrUpdateModalOpen" :title="modalType == 'add'? '添加': '编辑'" :maskClosable="false" :footer="null" :destroyOnClose="true" @cancel="modalClose">
       <AddOrUpdateModal :modalType="modalType" :modalData="modalData" @closeAddOrUpdateModal="closeAddOrUpdateModal"/>
     </a-modal>
+    <a-modal v-model:open="distributeModalOpen" title="停车场人员分配" :maskClosable="false" :footer="null" :destroyOnClose="true" @cancel="distributeModalOpen=false">
+      <DistributeModal :modalData="distributeModalData" @closeDistributeModal="closeDistributeModal"/>
+    </a-modal>
   </div>
 </template>
 
@@ -22,13 +25,16 @@
   import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
   import { BasicTable, useTable } from '@/components/Table';
   import { PermissionBtn } from '@/components/PermissionBtn/index';
-  import { LoadAllPage, Delete } from '@/api/illegalconstruction/parkinglot'
+  import { LoadAllPage, Delete, Get } from '@/api/illegalconstruction/parkinglot'
   import { columns, searchFormSchema } from './util';
   import AddOrUpdateModal from './AddOrUpdateModal/index.vue'
+  import DistributeModal from './DistributeModal/index.vue'
 
   const addOrUpdateModalOpen = ref(false)
+  const distributeModalOpen = ref(false)
   const modalType = ref()
   const modalData = ref({})
+  const distributeModalData = ref({})
 
   // 表格
   const [registerTable, { reload, getSelectRows, getPaginationRef }] = useTable({
@@ -86,6 +92,17 @@
           },
         });
         break;
+      case 'distribute':
+        let isSelected = getSelectRows()
+        if (isSelected.length !== 1) {
+          message.warning('请选择一条数据');
+          return;
+        }
+        Get({id: isSelected[0].id}).then(res => {
+          distributeModalData.value = {...isSelected[0], userList: res.userids.map(item => item.Id)}
+          distributeModalOpen.value = true
+        })
+        break;
     }
   };
   const closeAddOrUpdateModal = (isReload=false) => {
@@ -95,6 +112,9 @@
       reload()
     }
   }
+  const closeDistributeModal = () => {
+    distributeModalOpen.value = false
+  }
   const modalClose = () => {
     modalData.value = {}
   }