员工信息调整，按钮调整，样式调整，增加重置密码、冻结、解冻功能

src/views/biz/bizEmployeesInfo/BizEmployeesInfo.api.ts

@@ -1,20 +1,21 @@
 import { defHttp } from '/@/utils/http/axios';
-import { useMessage } from "/@/hooks/web/useMessage";
+import { useMessage } from '/@/hooks/web/useMessage';
 
 const { createConfirm } = useMessage();
 
 enum Api {
   list = '/admin/bizEmployeesInfo/bizEmployeesInfo/list',
-  save='/admin/bizEmployeesInfo/bizEmployeesInfo/add',
+  save = '/admin/bizEmployeesInfo/bizEmployeesInfo/add',
-  edit='/admin/bizEmployeesInfo/bizEmployeesInfo/edit',
+  edit = '/admin/bizEmployeesInfo/bizEmployeesInfo/edit',
   deleteOne = '/admin/bizEmployeesInfo/bizEmployeesInfo/delete',
   deleteBatch = '/admin/bizEmployeesInfo/bizEmployeesInfo/deleteBatch',
   importExcel = '/admin/bizEmployeesInfo/bizEmployeesInfo/importExcel',
   exportXls = '/admin/bizEmployeesInfo/bizEmployeesInfo/exportXls',
+  djOrJd = '/admin/bizEmployeesInfo/bizEmployeesInfo/djOrJd',
 
   getEmployeesList = '/services/serviceTag/serviceTag/getEmployeesList',
   queryTagsById = '/services/serviceTag/serviceTag/queryById',
-  checkTags='/bizEmployeesInfo/nuBizEmployeesServcieTags/add',
+  checkTags = '/bizEmployeesInfo/nuBizEmployeesServcieTags/add',
   removeTags = '/bizEmployeesInfo/nuBizEmployeesServcieTags/delete',
   getEmployeesServiceTags = '/services/serviceTag/serviceTag/getEmployeesServiceTags',
   queryTreeListForRole = '/employeesPermission/nuAppEmployeesPermission/queryTreeList',
@@ -23,6 +24,12 @@ enum Api {
   queryDataRule = '/employeesPermission/nuAppEmployeesPermission/queryDataRule',
   qyList = '/nuBaseInfo/nuBaseInfo/qyPemissionList',
 
+  fwzlList = '/services/serviceDirective/list',
+
+  changePassword = '/sys/user/changePassword',
+  frozenBatch = '/sys/user/frozenBatch',
+
+  forceLogoutByUsername = '/sys/online/forceLogoutByUsername',
 }
 
 /**
@@ -51,11 +58,11 @@ export const queryTagsById = (params) => defHttp.get({ url: Api.queryTagsById, p
  * @param params
  * @param handleSuccess
  */
-export const deleteOne = (params,handleSuccess) => {
+export const deleteOne = (params, handleSuccess) => {
-  return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => {
+  return defHttp.delete({ url: Api.deleteOne, params }, { joinParamsToUrl: true }).then(() => {
     handleSuccess();
   });
-}
+};
 
 /**
  * 批量删除
@@ -70,12 +77,12 @@ export const batchDelete = (params, handleSuccess) => {
     okText: '确认',
     cancelText: '取消',
     onOk: () => {
-      return defHttp.delete({url: Api.deleteBatch, data: params}, {joinParamsToUrl: true}).then(() => {
+      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
         handleSuccess();
       });
-    }
+    },
   });
-}
+};
 
 /**
  * 保存或者更新
@@ -85,19 +92,16 @@ export const batchDelete = (params, handleSuccess) => {
 export const saveOrUpdate = (params, isUpdate) => {
   let url = isUpdate ? Api.edit : Api.save;
   return defHttp.post({ url: url, params }, { isTransformResponse: false });
-}
+};
-
-
 
 export const checkTags = (params) => {
   let url = Api.checkTags;
   return defHttp.post({ url: url, params }, { isTransformResponse: false });
-}
+};
 export const removeTags = (params) => {
   let url = Api.removeTags;
-  return defHttp.delete({ url: url, params },  {joinParamsToUrl: true});
+  return defHttp.delete({ url: url, params }, { joinParamsToUrl: true });
-}
+};
-
 
 /**
  * 根据角色查询树信息
@@ -120,3 +124,40 @@ export const queryDataRule = (params) =>
  * 保存角色数据规则
  */
 export const saveDataRule = (params) => defHttp.post({ url: Api.queryDataRule, params });
+
+export const fwzlList = (params) => defHttp.get({ url: Api.fwzlList, params });
+
+/**
+ * 修改密码
+ * @param params
+ */
+export const changePassword = (params) => {
+  return defHttp.put({ url: Api.changePassword, params }, { isTransformResponse: false });
+};
+
+/**
+ * 修改冻结状态
+ * @param params 
+ * @returns 
+ */
+export const frozenBatch = (params) => {
+  return defHttp.put({ url: Api.frozenBatch, params }, { isTransformResponse: false });
+};
+
+/**
+ * 强制退出
+ * @param params
+ * @returns
+ */
+export const forceLogoutByUsername = (params) => {
+  return defHttp.post({ url: Api.forceLogoutByUsername, params }, { isTransformResponse: false });
+};
+
+/**
+ * 调整员工表冻结状态
+ * @param params 
+ * @returns 
+ */
+export const djOrJd = (params) => {
+  return defHttp.post({ url: Api.djOrJd, params }, { isTransformResponse: false });
+};

src/views/biz/bizEmployeesInfo/BizEmployeesInfo.data.ts

@@ -195,6 +195,36 @@ export const columns: BasicColumn[] = [
   },
 ];
 
+export const fwzlColumns: BasicColumn[] = [
+  {
+    title: '分类标签',
+    align: 'center',
+    dataIndex: 'instructionTagId_dictText',
+    width: 100,
+  },
+  {
+    title: '服务类别',
+    align: 'center',
+    dataIndex: 'categoryId_dictText',
+  },
+  {
+    title: '服务类型',
+    align: 'center',
+    dataIndex: 'typeId_dictText',
+  },
+  {
+    title: '服务指令',
+    align: 'center',
+    dataIndex: 'directiveName',
+  },
+  {
+    title: '是否启用',
+    align: 'center',
+    dataIndex: 'izEnabled_dictText',
+    width: 100,
+  },
+];
+
 // 高级查询数据
 export const superQuerySchema = {
   name: {title: '姓名',order: 0,view: 'text', type: 'string',},
@@ -273,11 +303,11 @@ export const employeesTagcolumns: BasicColumn[] = [
     dataIndex: 'tagName',
     width:'50%'
   },
-  {
+  // {
-    title: '备注',
+  //   title: '备注',
-    align: "center",
+  //   align: "center",
-    dataIndex: 'description'
+  //   dataIndex: 'description'
-  },
+  // },
   {
     title: '操作',
     key:'action',

src/views/biz/bizEmployeesInfo/BizEmployeesInfoList.vue

@@ -8,7 +8,7 @@
           <a-col :lg="6">
             <a-form-item name="name">
               <template #label><span title="员工姓名">员工姓名</span></template>
-              <j-input placeholder="请输入员工姓名" v-model:value="queryParam.name" allow-clear></j-input>
+              <a-input placeholder="请输入员工姓名" v-model:value="queryParam.name" allow-clear></a-input>
             </a-form-item>
           </a-col>
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
@@ -43,7 +43,7 @@
             </div>
             <div style="margin-top: 2px;">
               <span style="color: rgb(144, 147, 153);">入职日期 :<span style="margin-left: 24px;"> {{ item.entryTime
-              }}</span></span>
+                  }}</span></span>
             </div>
           </a-col>
           <a-col :span="3">
@@ -97,8 +97,12 @@
                   </a-button>
                   <template #overlay>
                     <a-menu>
-                      <a-menu-item @click="handleEdit(item)">编辑</a-menu-item>
+                      <a-menu-item @click="handleEdit(item)">员工详情</a-menu-item>
-                      <a-menu-item @click="handleFwbq(item)">指令标签</a-menu-item>
+                      <a-menu-item @click="handleJdpe(item)">接单配额</a-menu-item>
+                      <a-menu-item @click="handleFwbq(item)">分配指令</a-menu-item>
+                      <a-menu-item @click="handleCzmm(item)">重置密码</a-menu-item>
+                      <a-menu-item @click="handleDjzh(item)" v-if="item.userStatus == '1'">冻结账号</a-menu-item>
+                      <a-menu-item @click="handleJdzh(item)" v-if="item.userStatus == '0'">解冻账号</a-menu-item>
                       <!-- <a-menu-item @click="handleFpzh(item)">分配账号</a-menu-item> -->
                       <a-menu-item @click="handlePerssion(item)">权限标签</a-menu-item>
                     </a-menu>
@@ -146,7 +150,7 @@
 <script lang="ts" name="bizEmployeesInfo-bizEmployeesInfo" setup>
 import { ref, reactive, onMounted } from 'vue';
 import { useListPage } from '/@/hooks/system/useListPage';
-import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './BizEmployeesInfo.api';
+import { list, deleteOne, batchDelete, getImportUrl, getExportUrl, changePassword, forceLogoutByUsername, frozenBatch, djOrJd } from './BizEmployeesInfo.api';
 import { downloadFile } from '/@/utils/common/renderUtils';
 import BizEmployeesInfoModal from './components/BizEmployeesInfoModal.vue'
 import EmployeesServiceTagModal from '/@/views/biz/bizEmployeesInfo/employeesServiceTag/employeesServiceTagModal.vue'
@@ -158,8 +162,9 @@ import UserDrawer from '/@/views/system/user/UserDrawer.vue';
 import JInput from "/@/components/Form/src/jeecg/components/JInput.vue";
 import RolePermissionDrawer from './components/RolePermissionDrawer.vue';
 import EmployeesInvidedList from '/@/views/admin/employeesapply/EmployeesInvidedList.vue'
+import { useMessage } from '/@/hooks/web/useMessage';
 
-
+const { createMessage, createConfirm } = useMessage();
 const [rolePermissionDrawer, { openDrawer: openRolePermissionDrawer }] = useDrawer();
 const APagination = Pagination;
 //注册drawer
@@ -185,6 +190,11 @@ const wrapperCol = reactive({
   sm: 20,
 });
 
+function handleJdpe(record) {
+  registerModal.value.disableSubmit = false;
+  registerModal.value.editJdpe(record);
+}
+
 /**
  * 角色授权弹窗
  */
@@ -313,6 +323,70 @@ function handleCancel() {
   visible.value = false;
 }
 
+async function handleCzmm(record) {
+  createConfirm({
+    iconType: 'warning',
+    title: '密码重置操作确认',
+    content: '是否确认将【' + record.name + '】的登录密码重置为"123456"？重置后已登录设备将强制退出，且旧密码无法继续使用，请及时通知该员工！',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: async () => {
+      let res = await changePassword({ username: record.tel, password: '123456' });
+      if (!!res && res.code == 200) {
+        createMessage.success('【' + record.name + '】登录密码重置成功，请即时通知该员工')
+        //强退
+        forceLogoutByUsername({ 'username': record.tel })
+      }
+      reload()
+    }
+  });
+}
+
+/**
+ * 冻结账号
+ * @param record 
+ */
+function handleDjzh(record) {
+  createConfirm({
+    iconType: 'warning',
+    title: '冻结操作确认',
+    content: '是否确认将【' + record.name + '】的账号进行冻结？冻结后已登录设备将强制退出，且无法重新登录！',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: async () => {
+      let res = await frozenBatch({ ids: record.userId, status: 0 });
+      if (!!res && res.code == 200) {
+        createMessage.success('【' + record.name + '】账号已冻结！')
+        //强退
+        forceLogoutByUsername({ 'username': record.tel })
+        djOrJd({ id: record.id, izFreeze: 'Y', openId: record.openId })
+      }
+      reload()
+    }
+  });
+}
+
+/**
+ * 解冻账号
+ * @param record 
+ */
+function handleJdzh(record) {
+  createConfirm({
+    iconType: 'warning',
+    title: '解冻操作确认',
+    content: '是否确认将【' + record.name + '】的账号进行解冻？解冻后该用户账号可正常使用！',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: async () => {
+      let res = await frozenBatch({ ids: record.userId, status: 1 });
+      if (!!res && res.code == 200) {
+        createMessage.success('【' + record.name + '】账号已解冻！')
+        djOrJd({ id: record.id, izFreeze: 'N', openId: record.openId })
+      }
+      reload()
+    }
+  });
+}
 // 自动请求并暴露内部方法
 onMounted(() => {
   reload();

src/views/biz/bizEmployeesInfo/components/BizEmployeesInfoForm.vue

@@ -1,6 +1,6 @@
 <template>
 	<a-spin :spinning="confirmLoading">
-		<JFormContainer :disabled="disabled">
+		<JFormContainer :disabled="true" v-if="!izJdpe">
 			<template #detail>
 				<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
 					name="EmployeesApplyForm">
@@ -21,7 +21,7 @@
 				</a-form>
 			</template>
 		</JFormContainer>
-		<JFormContainer :disabled="true" style="margin-top:-63px ;">
+		<JFormContainer :disabled="true" style="margin-top:-63px ;" v-if="!izJdpe">
 			<template #detail>
 				<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
 					name="EmployeesApplyForm">
@@ -173,7 +173,7 @@
 				</a-form>
 			</template>
 		</JFormContainer>
-		<JFormContainer>
+		<JFormContainer v-if="!izJdpe">
 			<template #detail>
 				<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol2" :wrapperCol="wrapperCol2"
 					name="EmployeesApplyForm">
@@ -292,14 +292,14 @@
 				</a-form>
 			</template>
 		</JFormContainer>
-		<JFormContainer :disabled="false">
+		<JFormContainer :disabled="false" v-if="izJdpe">
 			<template #detail>
 				<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
 					name="EmployeesApplyForm">
 					<a-row class="card-class">
-						<a-col :span="24" style="border-bottom: 2px solid #f7f7f7; margin-bottom: 14px;">
+						<!-- <a-col :span="24" style="border-bottom: 2px solid #f7f7f7; margin-bottom: 14px;">
-							<SectionDivider :title="'接单配置'" />
+							<SectionDivider :title="'接单配额'" />
-						</a-col>
+						</a-col> -->
 						<a-col :span="12">
 							<a-form-item label="接单上限" v-bind="validateInfos.orderCap" id="EmployeesApplyForm-orderCap"
 								name="orderCap">
@@ -406,13 +406,29 @@ const disabled = computed(() => {
  * 新增
  */
 function add() {
-	edit({});
+	izJdpe.value = false
+	handleInit({});
 }
 
+const izJdpe = ref(false)//是否为接单配额操作
+
 /**
  * 编辑
  */
 function edit(record) {
+	izJdpe.value = false
+	handleInit(record)
+}
+
+/**
+ * 接单配额
+ */
+function editJdpe(record) {
+	izJdpe.value = true
+	handleInit(record)
+}
+
+function handleInit(record) {
 	ageVal.value = handleComputedAge(record.dateOfBirth)
 	nextTick(() => {
 		resetFields();
@@ -427,6 +443,8 @@ function edit(record) {
 	});
 }
 
+
+
 /**
  * 提交数据
  */
@@ -511,6 +529,7 @@ onMounted(() => {
 defineExpose({
 	add,
 	edit,
+	editJdpe,
 	submitForm,
 });
 </script>

src/views/biz/bizEmployeesInfo/components/BizEmployeesInfoModal.vue

@@ -42,13 +42,21 @@ function add() {
  * @param record
  */
 function edit(record) {
-  title.value = disableSubmit.value ? '详情' : '编辑';
+  title.value = '员工详情';
   visible.value = true;
   nextTick(() => {
     registerForm.value.edit(record);
   });
 }
 
+function editJdpe(record) {
+  title.value = '接单配额';
+  visible.value = true;
+  nextTick(() => {
+    registerForm.value.editJdpe(record);
+  });
+}
+
 /**
  * 确定按钮点击事件
  */
@@ -74,6 +82,7 @@ function handleCancel() {
 defineExpose({
   add,
   edit,
+  editJdpe,
   disableSubmit,
 });
 </script>

src/views/biz/bizEmployeesInfo/employeesServiceTag/EmployeesServiceTagForm.vue

@@ -1,83 +1,108 @@
 <template>
-  <div>
+  <div style="height: 100%; display: flex; flex-direction: column; overflow: hidden;">
-    <a-row>
+    <a-row style="flex: 1; overflow: hidden; display: flex; flex-wrap: nowrap;">
-      <a-col :span="rowA">
+      <!-- 左侧：可选列表 -->
-        <div style="border-radius: 14px;">
+      <a-col :span="16" style="height: 100%; overflow: hidden; padding-right: 8px;">
-          <!--引用表格-->
+        <div style="height: 100%; display: flex; flex-direction: column; border-radius: 14px; background-color: white; overflow: hidden; padding: 14px;">
-          <BasicTable @register="registerTable">
+          <a-tabs v-model:activeKey="activeTabKey" style="height: 100%;">
-            <!--插槽:table标题-->
+            <a-tab-pane key="ygbq" tab="员工标签" style="height: 100%;">
-            <template #tableTitle>
+              <div style="height: 100%; display: flex; flex-direction: column;">
-              <div class="title1Class">可选指令标签</div>
+                <BasicTable @register="registerTable" :scroll="{ y: '59vh' }">
-            </template>
+                  <template #action="{ record }">
-            <!--操作栏-->
+                    <TableAction :actions="getTableAction(record)" />
-            <template #action="{ record }">
+                  </template>
-              <TableAction :actions="getTableAction(record)" />
+                </BasicTable>
-            </template>
+              </div>
-            <!--字段回显插槽-->
+            </a-tab-pane>
-            <template v-slot:bodyCell="{ column, record, index, text }">
+            <a-tab-pane key="fwzl" tab="服务指令" style="height: 100%;">
-            </template>
+              <div style="height: 100%; display: flex; flex-direction: column;">
-          </BasicTable>
+                <BasicTable @register="fwzlRegisterTable" :scroll="{ y: '59vh' }">
-        </div>
+                  <template #action="{ record }">
-        <div style="padding: 14px;background-color: white;border-radius: 14px;">
+                    <TableAction :actions="getTableAction(record)" />
-          <div class="title1Class">已选指令标签</div>
+                  </template>
-          <a-table :dataSource="employeesDataSource" :columns="employeesTagcolumns" style="margin-top:8px;" bordered
+                </BasicTable>
-            size="small" :pagination="false">
+              </div>
-            <template #bodyCell="{ column, record }">
+            </a-tab-pane>
-              <template v-if="column.key === 'action'">
+          </a-tabs>
-                <a @click="handleYichu(record)">移除</a>
-                <a-divider type="vertical" />
-                <a @click="handleEmlDetail(record)">详情</a>
-              </template>
-            </template>
-          </a-table>
         </div>
       </a-col>
-      <a-col :span="rowB" style="padding-left: 14px;">
+
-        <div style="border: 1px solid rgb(243, 239, 239);padding: 8px;">
+      <!-- 右侧：已选列表和详情 -->
-          详情
+      <a-col :span="8" style="height: 100%; overflow: hidden; display: flex; flex-direction: column; gap: 8px;">
-          <a-list item-layout="horizontal" :data-source="tagsDetailData">
+        <!-- 已选列表 -->
-            <template #renderItem="{ item, index }">
+        <div style="flex: 1; background-color: white; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; overflow: hidden;">
-              <a-list-item>
+          <div class="title1Class">已选</div>
-                <a-list-item-meta :description="item.serviceContent">
+          <div style="flex: 1; margin-top: 8px; overflow: hidden;">
-                  <template #title>
+            <a-table 
-                    {{ (index + 1) + '、 ' + item.categoryName + '-' + item.typeName + '-' + item.directiveName }}
+              :dataSource="employeesDataSource" 
-                    <span v-if="item.tagsName">({{ item.tagsName }})</span>
+              :columns="employeesTagcolumns" 
-                  </template>
+              bordered 
-                </a-list-item-meta>
+              size="small"
-              </a-list-item>
+              :pagination="false" 
-            </template>
+              style="width: 100%; height: 100%;"
-          </a-list>
+              :scroll="{ y: '100%' }"
+            >
+              <template #bodyCell="{ column, record }">
+                <template v-if="column.key === 'action'">
+                  <a @click="handleYichu(record)">移除</a>
+                  <a-divider type="vertical" />
+                  <a @click="handleEmlDetail(record)">详情</a>
+                </template>
+              </template>
+            </a-table>
+          </div>
         </div>
+
+        <!-- 详情 -->
+        <!-- <div style="flex: 1; background-color: white; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; overflow: hidden;">
+          <div class="title1Class">详情</div>
+          <div style="flex: 1; margin-top: 8px; overflow-y: auto;">
+            <a-list item-layout="horizontal" :data-source="tagsDetailData">
+              <template #renderItem="{ item, index }">
+                <a-list-item>
+                  <a-list-item-meta :description="item.serviceContent">
+                    <template #title>
+                      {{ (index + 1) + '、 ' + item.categoryName + '-' + item.typeName + '-' + item.directiveName }}
+                      <span v-if="item.tagsName">({{ item.tagsName }})</span>
+                    </template>
+                  </a-list-item-meta>
+                </a-list-item>
+              </template>
+            </a-list>
+          </div>
+        </div> -->
       </a-col>
     </a-row>
   </div>
-
 </template>
 
 <script lang="ts" name="bizEmployeesInfo-nuBizEmployeesServcieTags" setup>
-import { ref, reactive, computed, unref } from 'vue';
+import { ref, reactive } from 'vue';
 import { BasicTable, useTable, TableAction } from '/@/components/Table';
 import { useModal } from '/@/components/Modal';
 import { useListPage } from '/@/hooks/system/useListPage'
-import { serviceTagcolumns, employeesTagcolumns } from '../BizEmployeesInfo.data';
+import { serviceTagcolumns, employeesTagcolumns, fwzlColumns } from '../BizEmployeesInfo.data';
-import { getEmployeesList, queryTagsById, checkTags, removeTags, getEmployeesServiceTags } from '../BizEmployeesInfo.api';
+import { getEmployeesList, queryTagsById, checkTags, removeTags, getEmployeesServiceTags, fwzlList } from '../BizEmployeesInfo.api';
-import { downloadFile } from '/@/utils/common/renderUtils';
 import { useUserStore } from '/@/store/modules/user';
-import { number } from 'vue-types';
+
-import { defHttp } from '/@/utils/http/axios';
 const queryParam = reactive<any>({});
 const checkedKeys = ref<Array<string | number>>([]);
 const userStore = useUserStore();
 
+// 控制当前激活的 tab
+const activeTabKey = ref('ygbq'); // 默认员工标签
+
 const rowA = ref<number>(24);
 const rowB = ref<number>(0);
 const employeesDataSource = ref<any[]>([]);
 const tagsDetailData = ref<any[]>([]);
-const employeesInfo = reactive<any>({});
+const employeesInfo = ref<any>({});
 const emit = defineEmits(['register', 'ok']);
+
 //注册model
 const [registerModal, { openModal }] = useModal();
-//注册table数据
+
+//注册table数据 - 员工标签表格
 const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
   tableProps: {
     title: '员工配置的指令标签',
@@ -87,13 +112,10 @@ const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
     immediate: false,
     showIndexColumn: true,
     formConfig: {
-      //labelWidth: 120,
       autoSubmitOnEnter: true,
       showAdvancedButton: true,
-      fieldMapToNumber: [
+      fieldMapToNumber: [],
-      ],
+      fieldMapToTime: [],
-      fieldMapToTime: [
-      ],
     },
     actionColumn: {
       width: 120,
@@ -104,61 +126,79 @@ const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
     },
   },
 })
-
 const [registerTable, { reload }] = tableContext
+
+// 服务指令表格
+const { prefixCls: fwzlPrefixCls, tableContext: fwzlTableContext } = useListPage({
+  tableProps: {
+    title: '服务指令',
+    api: fwzlList,
+    columns: fwzlColumns,
+    canResize: false,
+    showIndexColumn: true,
+    formConfig: {
+      autoSubmitOnEnter: true,
+      showAdvancedButton: true,
+      fieldMapToNumber: [],
+      fieldMapToTime: [],
+    },
+    actionColumn: {
+      width: 120,
+      fixed: 'right'
+    },
+    beforeFetch: (params) => {
+      return Object.assign(params, queryParam);
+    },
+  },
+})
+const [fwzlRegisterTable, { reload: fwzlReload }] = fwzlTableContext
+
 /**
 * 选择
  */
 async function handleXuanze(record) {
   const model = { employeesId: employeesInfo.value.id, tagsId: record.id };
-  await checkTags(model).then((res) => {
+  await checkTags(model)
-  })
     .finally(() => {
       reload();
       getEmployeesServiceTagsList();
     });
 }
+
 /**
    * 移除
    */
 async function handleYichu(record) {
   const model = { id: record.id };
-  await removeTags(model).then((res) => {
+  await removeTags(model)
-  })
     .finally(() => {
       reload();
       getEmployeesServiceTagsList();
     });
-
 }
 
 /**
 * 员工选择指令标签后的详情
  */
 function handleEmlDetail(record) {
-  console.log(record);
   rowA.value = 18;
   rowB.value = 6;
-
   queryTagsById({ id: record.employeesTagsId }).then(item => {
-    console.log(item);
     tagsDetailData.value = item.directives;
   })
 }
+
 /**
    * 指令标签列表详情
    */
 function handleDetail(record) {
   rowA.value = 18;
   rowB.value = 6;
-  console.log(record);
-
   queryTagsById({ id: record.id }).then(item => {
-    console.log(item);
     tagsDetailData.value = item.directives;
   })
-
 }
+
 /**
    * 操作栏
    */
@@ -185,7 +225,6 @@ function getEmployeesServiceTagsList() {
 }
 
 function init(record) {
-  //初始化
   queryParam.employeesId = record.id;
   employeesInfo.value = record;
   rowA.value = 24;
@@ -193,12 +232,11 @@ function init(record) {
   reload();
   getEmployeesServiceTagsList();
 }
+
 function submitForm() {
   emit('ok');
 }
 
-
-
 defineExpose({
   init,
   submitForm
@@ -212,8 +250,6 @@ defineExpose({
 }
 
 .title1Class {
-  // background-image: url(../../../../../public/resource/img/titleBackground1.jpg);
-  // width: 100px;
   font-weight: bold;
 }
 
@@ -221,7 +257,7 @@ defineExpose({
   padding: 0px;
 }
 
-:deep .jeecg-basic-table .ant-table-wrapper{
+:deep .jeecg-basic-table .ant-table-wrapper {
   border-radius: 14px;
 }
-</style>
+</style>

src/views/biz/bizEmployeesInfo/employeesServiceTag/EmployeesServiceTagForm1.vue

@@ -0,0 +1,275 @@
+<template>
+  <div style="height: 100%; display: flex; flex-direction: column; overflow: hidden;">
+    <a-row style="flex: 1; overflow: hidden; display: flex; flex-wrap: nowrap;">
+      <a-col :span="rowA"
+        style="display: flex; flex-direction: column; height: 100%; overflow: hidden; padding-right: 8px;">
+        <div
+        style="flex: 1.15; min-height: 0; display: flex; flex-direction: column; border-radius: 14px; background-color: white; margin-bottom: 8px; overflow: hidden; padding: 14px;">
+        <!-- <div class="title1Class">可选</div> -->
+          <a-tabs v-model:activeKey="activeTabKey" style="height: 100%;">
+            <a-tab-pane key="ygbq" tab="员工标签" style="height: 100%;">
+              <!-- 员工标签 -->
+              <div style="height: 300px; display: flex; flex-direction: column;margin-top: -14px;">
+                <BasicTable @register="registerTable" :scroll="{ y: 200 }">
+                  <!--插槽:table标题-->
+                  <template #tableTitle>
+                    <!-- <div class="title1Class">可选员工标签</div> -->
+                  </template>
+                  <!--操作栏-->
+                  <template #action="{ record }">
+                    <TableAction :actions="getTableAction(record)" />
+                  </template>
+                  <!--字段回显插槽-->
+                  <template v-slot:bodyCell="{ column, record, index, text }">
+                  </template>
+                </BasicTable>
+              </div>
+            </a-tab-pane>
+            <a-tab-pane key="fwzl" tab="服务指令" style="height: 100%;">
+              <!-- 服务指令 -->
+              <div style="height: 300px; display: flex; flex-direction: column;margin-top: -14px;">
+                <BasicTable @register="fwzlRegisterTable" :scroll="{ y: 200 }">
+                  <!--插槽:table标题-->
+                  <template #tableTitle>
+                    <!-- <div class="title1Class">可选服务指令</div> -->
+                  </template>
+                  <!--操作栏-->
+                  <template #action="{ record }">
+                    <TableAction :actions="getTableAction(record)" />
+                  </template>
+                  <!--字段回显插槽-->
+                  <template v-slot:bodyCell="{ column, record, index, text }">
+                  </template>
+                </BasicTable>
+              </div>
+            </a-tab-pane>
+          </a-tabs>
+        </div>
+
+        <div
+          style="flex: 0.85; min-height: 0; display: flex; flex-direction: column; background-color: white; border-radius: 14px; padding: 14px; overflow: hidden;">
+          <div class="title1Class">已选</div>
+          <div style="flex: 1; overflow-y: auto; margin-top: 8px;">
+            <a-table :dataSource="employeesDataSource" :columns="employeesTagcolumns" bordered size="small"
+              :pagination="false" style="width: 100%;" :scroll="{ y: 235 }">
+              <template #bodyCell="{ column, record }">
+                <template v-if="column.key === 'action'">
+                  <a @click="handleYichu(record)">移除</a>
+                  <a-divider type="vertical" />
+                  <a @click="handleEmlDetail(record)">详情</a>
+                </template>
+              </template>
+            </a-table>
+          </div>
+        </div>
+      </a-col>
+
+      <a-col :span="rowB" style="padding-left: 0px; height: 100%; overflow: hidden;">
+        <div
+          style="border: 1px solid rgb(243, 239, 239); padding: 14px; height: 100%; display: flex; flex-direction: column; background-color: white; border-radius: 14px; overflow: hidden;">
+          <div>详情</div>
+          <div style="flex: 1; overflow-y: auto; margin-top: 8px;">
+            <a-list item-layout="horizontal" :data-source="tagsDetailData">
+              <template #renderItem="{ item, index }">
+                <a-list-item>
+                  <a-list-item-meta :description="item.serviceContent">
+                    <template #title>
+                      {{ (index + 1) + '、 ' + item.categoryName + '-' + item.typeName + '-' + item.directiveName }}
+                      <span v-if="item.tagsName">({{ item.tagsName }})</span>
+                    </template>
+                  </a-list-item-meta>
+                </a-list-item>
+              </template>
+            </a-list>
+          </div>
+        </div>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script lang="ts" name="bizEmployeesInfo-nuBizEmployeesServcieTags" setup>
+import { ref, reactive } from 'vue';
+import { BasicTable, useTable, TableAction } from '/@/components/Table';
+import { useModal } from '/@/components/Modal';
+import { useListPage } from '/@/hooks/system/useListPage'
+import { serviceTagcolumns, employeesTagcolumns, fwzlColumns } from '../BizEmployeesInfo.data';
+import { getEmployeesList, queryTagsById, checkTags, removeTags, getEmployeesServiceTags, fwzlList } from '../BizEmployeesInfo.api';
+import { useUserStore } from '/@/store/modules/user';
+
+const queryParam = reactive<any>({});
+const checkedKeys = ref<Array<string | number>>([]);
+const userStore = useUserStore();
+
+// 控制当前激活的 tab
+const activeTabKey = ref('ygbq'); // 默认员工标签
+
+const rowA = ref<number>(24);
+const rowB = ref<number>(0);
+const employeesDataSource = ref<any[]>([]);
+const tagsDetailData = ref<any[]>([]);
+const employeesInfo = ref<any>({});
+const emit = defineEmits(['register', 'ok']);
+
+//注册model
+const [registerModal, { openModal }] = useModal();
+
+//注册table数据 - 员工标签表格
+const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+  tableProps: {
+    title: '员工配置的指令标签',
+    api: getEmployeesList,
+    columns: serviceTagcolumns,
+    canResize: false,
+    immediate: false,
+    showIndexColumn: true,
+    formConfig: {
+      autoSubmitOnEnter: true,
+      showAdvancedButton: true,
+      fieldMapToNumber: [],
+      fieldMapToTime: [],
+    },
+    actionColumn: {
+      width: 120,
+      fixed: 'right'
+    },
+    beforeFetch: (params) => {
+      return Object.assign(params, queryParam);
+    },
+  },
+})
+const [registerTable, { reload }] = tableContext
+
+// 服务指令表格
+const { prefixCls: fwzlPrefixCls, tableContext: fwzlTableContext } = useListPage({
+  tableProps: {
+    title: '服务指令',
+    api: fwzlList,
+    columns: fwzlColumns,
+    canResize: false,
+    showIndexColumn: true,
+    formConfig: {
+      autoSubmitOnEnter: true,
+      showAdvancedButton: true,
+      fieldMapToNumber: [],
+      fieldMapToTime: [],
+    },
+    actionColumn: {
+      width: 120,
+      fixed: 'right'
+    },
+    beforeFetch: (params) => {
+      return Object.assign(params, queryParam);
+    },
+  },
+})
+const [fwzlRegisterTable, { reload: fwzlReload }] = fwzlTableContext
+
+/**
+* 选择
+ */
+async function handleXuanze(record) {
+  const model = { employeesId: employeesInfo.value.id, tagsId: record.id };
+  await checkTags(model)
+    .finally(() => {
+      reload();
+      getEmployeesServiceTagsList();
+    });
+}
+
+/**
+   * 移除
+   */
+async function handleYichu(record) {
+  const model = { id: record.id };
+  await removeTags(model)
+    .finally(() => {
+      reload();
+      getEmployeesServiceTagsList();
+    });
+}
+
+/**
+* 员工选择指令标签后的详情
+ */
+function handleEmlDetail(record) {
+  rowA.value = 18;
+  rowB.value = 6;
+  queryTagsById({ id: record.employeesTagsId }).then(item => {
+    tagsDetailData.value = item.directives;
+  })
+}
+
+/**
+   * 指令标签列表详情
+   */
+function handleDetail(record) {
+  rowA.value = 18;
+  rowB.value = 6;
+  queryTagsById({ id: record.id }).then(item => {
+    tagsDetailData.value = item.directives;
+  })
+}
+
+/**
+   * 操作栏
+   */
+function getTableAction(record) {
+  return [
+    {
+      label: '选择',
+      onClick: handleXuanze.bind(null, record),
+      ifShow: record.employeesTagsId == '0'
+    },
+    {
+      label: '详情',
+      onClick: handleDetail.bind(null, record),
+    }
+  ]
+}
+
+//获取员工已获取的指令标签
+function getEmployeesServiceTagsList() {
+  const model = { employeesId: employeesInfo.value.id };
+  getEmployeesServiceTags(model).then(item => {
+    employeesDataSource.value = item;
+  });
+}
+
+function init(record) {
+  queryParam.employeesId = record.id;
+  employeesInfo.value = record;
+  rowA.value = 24;
+  rowB.value = 0;
+  reload();
+  getEmployeesServiceTagsList();
+}
+
+function submitForm() {
+  emit('ok');
+}
+
+defineExpose({
+  init,
+  submitForm
+});
+</script>
+
+<style lang="less" scoped>
+:deep(.ant-picker),
+:deep(.ant-input-number) {
+  width: 100%;
+}
+
+.title1Class {
+  font-weight: bold;
+}
+
+:deep .jeecg-basic-table-form-container {
+  padding: 0px;
+}
+
+:deep .jeecg-basic-table .ant-table-wrapper {
+  border-radius: 14px;
+}
+</style>

src/views/biz/bizEmployeesInfo/employeesServiceTag/EmployeesServiceTagModal.vue

@@ -26,7 +26,7 @@
    * 新增
    */
   function init(record) {
-    title.value = '指令标签';
+    title.value = '分配指令';
     visible.value = true;
     nextTick(() => {
       registerForm.value.init(record);