yangjun
/
nursing_unit_vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1、员工标签改版 

2、邀请员工合并到员工信息中
3、调整员工信息样式
This commit is contained in:
1378012178@qq.com 2026-03-11 15:44:24 +08:00
parent 734ccf10d5
commit 6f106fdd34
17 changed files with 1278 additions and 367 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/admin/employeesadvisoryinfo/NuEmployeesAdvisoryInfo.data.ts
View File

@ -7,17 +7,17 @@ import { JVxeTypes, JVxeColumn, JVxeTableInstance } from '/@/components/jeecg/JV
//列表数据
export const columns: BasicColumn[] = [
{
title: '姓名',
title: '员工姓名',
align: 'center',
dataIndex: 'name',
},
{
title: '性别',
title: '员工性别',
align: 'center',
dataIndex: 'sex',
},
{
title: '年龄',
title: '员工年龄',
align: 'center',
dataIndex: 'birthDate',
},

8
src/views/admin/employeesadvisoryinfo/NuEmployeesAdvisoryInfoList.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="p-2">
<div>
<!--查询区域-->
<div class="jeecg-basic-table-form-container">
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol"
@ -7,14 +7,14 @@
<a-row :gutter="24">
<a-col :lg="8">
<a-form-item name="name">
<template #label><span title="姓名">姓名</span></template>
<JInput v-model:value="queryParam.name" />
<template #label><span title="员工姓名">员工姓名</span></template>
<JInput v-model:value="queryParam.name" placeholder="请输入员工姓名"/>
</a-form-item>
</a-col>
<a-col :lg="8">
<a-form-item name="tel">
<template #label><span title="联系电话">联系电话</span></template>
<JInput v-model:value="queryParam.tel" />
<JInput v-model:value="queryParam.tel" placeholder="请输入联系电话"/>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">

42
src/views/admin/employeesadvisoryinfo/components/NuEmployeesAdvisoryInfoForm.vue
View File

@ -5,24 +5,24 @@
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
name="NuEmployeesAdvisoryInfoForm">
<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="'基本信息'" />
</a-col>
<a-col :span="12">
<a-form-item label="姓名" v-bind="validateInfos.name" id="NuEmployeesAdvisoryInfoForm-name" name="name">
<a-input v-model:value="formData.name" placeholder="请输入咨询人姓名" disabled ></a-input>
<a-form-item label="员工姓名" v-bind="validateInfos.name" id="NuEmployeesAdvisoryInfoForm-name" name="name">
<a-input v-model:value="formData.name" disabled></a-input>
<!-- {{ formData.name }} -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="联系电话" v-bind="validateInfos.tel" id="NuEmployeesAdvisoryInfoForm-tel" name="tel">
<a-input v-model:value="formData.tel" placeholder="请输入联系电话" disabled ></a-input>
<a-input v-model:value="formData.tel" disabled></a-input>
<!-- {{ formData.tel }} -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="性别" v-bind="validateInfos.sex" id="NuEmployeesAdvisoryInfoForm-sex" name="sex">
<a-input v-model:value="formData.sex" placeholder="请输入性别" disabled ></a-input>
<a-input v-model:value="formData.sex" disabled></a-input>
<!-- {{ formData.sex }} -->
</a-form-item>
</a-col>
@ -34,7 +34,7 @@
<a-col :span="12">
<a-form-item label="出生日期" v-bind="validateInfos.birthDate" id="NuEmployeesAdvisoryInfoForm-birthDate"
name="birthDate">
<a-input v-model:value="formData.birthDate" placeholder="出生日期" disabled ></a-input>
<a-input v-model:value="formData.birthDate" disabled></a-input>
<!-- <a-date-picker placeholder="请选择出生日期" v-model:value="formData.birthDate" disabled value-format="YYYY-MM-DD" style="width: 100%" /> -->
<!-- {{ formData.birthDate }} -->
</a-form-item>
@ -42,56 +42,56 @@
<a-col :span="12">
<a-form-item label="民族" v-bind="validateInfos.national" id="NuEmployeesAdvisoryInfoForm-national"
name="national">
<a-input v-model:value="formData.national" placeholder="请输入民族" disabled ></a-input>
<a-input v-model:value="formData.national" disabled></a-input>
<!-- {{ formData.national }} -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="户籍所在地" v-bind="validateInfos.idCardAddress"
id="NuEmployeesAdvisoryInfoForm-idCardAddress" name="idCardAddress">
<a-textarea v-model:value="formData.idCardAddress" placeholder="请输入住址" disabled :autosize="true"></a-textarea>
<a-textarea v-model:value="formData.idCardAddress" disabled :autosize="true"></a-textarea>
<!-- {{ formData.idCardAddress }} -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="身份证号" v-bind="validateInfos.idCard" id="NuEmployeesAdvisoryInfoForm-idCard"
name="idCard">
<a-input v-model:value="formData.idCard" placeholder="请输入身份证号" disabled ></a-input>
<a-input v-model:value="formData.idCard" disabled></a-input>
<!-- {{ formData.idCard }} -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="婚否" v-bind="validateInfos.maritalStatus"
id="NuEmployeesAdvisoryInfoForm-maritalStatus" name="maritalStatus">
<a-input v-model:value="formData.maritalStatus" placeholder="请输入婚否" disabled ></a-input>
<a-input v-model:value="formData.maritalStatus" disabled></a-input>
<!-- {{ formData.maritalStatus }} -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="身高" v-bind="validateInfos.height" id="NuEmployeesAdvisoryInfoForm-height"
name="height">
<a-input v-model:value="formData.height" placeholder="请输入身高" disabled ></a-input>
<a-input v-model:value="formData.height" disabled></a-input>
<!-- {{ formData.height }} -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="体重" v-bind="validateInfos.weight" id="NuEmployeesAdvisoryInfoForm-weight"
name="weight">
<a-input v-model:value="formData.weight" placeholder="请输入体重" disabled ></a-input>
<a-input v-model:value="formData.weight" disabled></a-input>
<!-- {{ formData.weight }} -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="健康状况" v-bind="validateInfos.healthStatus"
id="NuEmployeesAdvisoryInfoForm-healthStatus" name="healthStatus">
<a-input v-model:value="formData.healthStatus" placeholder="请输入健康状况" disabled ></a-input>
<a-input v-model:value="formData.healthStatus" disabled></a-input>
<!-- {{ formData.healthStatus }} -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="政治面貌" v-bind="validateInfos.politicalAppearance"
id="NuEmployeesAdvisoryInfoForm-politicalAppearance" name="politicalAppearance">
<a-input v-model:value="formData.politicalAppearance" placeholder="请输入政治面貌" disabled ></a-input>
<a-input v-model:value="formData.politicalAppearance" disabled></a-input>
<!-- {{ formData.politicalAppearance }} -->
</a-form-item>
</a-col>
@ -99,35 +99,35 @@
<a-col :span="12">
<a-form-item label="紧急联系人" v-bind="validateInfos.contactName" id="NuEmployeesAdvisoryInfoForm-contactName"
name="contactName">
<a-input v-model:value="formData.contactName" placeholder="请输入紧急联系人姓名" disabled ></a-input>
<a-input v-model:value="formData.contactName" disabled></a-input>
<!-- {{ formData.contactName }} -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="紧急联系人电话" v-bind="validateInfos.contactTel" id="NuEmployeesAdvisoryInfoForm-contactTel"
name="contactTel">
<a-input v-model:value="formData.contactTel" placeholder="请输入紧急联系人电话" disabled ></a-input>
<a-input v-model:value="formData.contactTel" disabled></a-input>
<!-- {{ formData.contactTel }} -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="与本人关系" v-bind="validateInfos.contactRelationship"
id="NuEmployeesAdvisoryInfoForm-contactRelationship" name="contactRelationship">
<a-input v-model:value="formData.contactRelationship" placeholder="请输入紧急联系人与本人关系" disabled ></a-input>
<a-input v-model:value="formData.contactRelationship" disabled></a-input>
<!-- {{ formData.contactRelationship }} -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="现住址" v-bind="validateInfos.currentAddress"
id="NuEmployeesAdvisoryInfoForm-currentAddress" name="currentAddress">
<a-textarea v-model:value="formData.currentAddress" placeholder="请输入现住址" disabled :autosize="true"></a-textarea>
<a-textarea v-model:value="formData.currentAddress" disabled :autosize="true"></a-textarea>
<!-- {{ formData.currentAddress }} -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="户口性质" v-bind="validateInfos.hukouType" id="NuEmployeesAdvisoryInfoForm-hukouType"
name="hukouType">
<a-input v-model:value="formData.hukouType" placeholder="请输入户口性质" disabled ></a-input>
<a-input v-model:value="formData.hukouType" disabled></a-input>
<!-- {{ formData.hukouType }} -->
</a-form-item>
</a-col>
@ -137,12 +137,12 @@
<SectionDivider :title="'身份证'" />
</a-col>
<a-col :span="12">
<a-form-item label="身份证正面">
<a-form-item label="人像面">
<j-image-upload :fileMax="1" :value="opeMediaAddress + formData.cardZmPath" disabled></j-image-upload>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="身份证反面">
<a-form-item label="国徽面">
<j-image-upload :fileMax="1" :value="opeMediaAddress + formData.cardFmPath" disabled></j-image-upload>
</a-form-item>
</a-col>

10
src/views/admin/employeesapply/EmployeesApply.data.ts
View File

@ -6,7 +6,7 @@ import { getWeekMonthQuarterYear } from '/@/utils';
//列表数据
export const columns: BasicColumn[] = [
{
title: '姓名',
title: '员工姓名',
align: 'center',
dataIndex: 'name',
width: 120
@ -49,17 +49,17 @@ export const columns: BasicColumn[] = [
//列表数据
export const columns1: BasicColumn[] = [
{
title: '姓名',
title: '员工姓名',
align: 'center',
dataIndex: 'name',
},
{
title: '性别',
title: '员工性别',
align: 'center',
dataIndex: 'sex',
},
{
title: '年龄',
title: '员工年龄',
align: 'center',
dataIndex: 'dateOfBirth',
},
@ -69,7 +69,7 @@ export const columns1: BasicColumn[] = [
dataIndex: 'tel',
},
{
title: '申请日期',
title: '邀请时间',
align: 'center',
dataIndex: 'createTime',
},

29
src/views/admin/employeesapply/EmployeesInvidedList.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="p-2">
<div>
<!--查询区域-->
<div class="jeecg-basic-table-form-container">
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol"
@ -7,24 +7,25 @@
<a-row :gutter="24">
<a-col :lg="6">
<a-form-item name="name">
<template #label><span title="姓名">姓名</span></template>
<JInput v-model:value="queryParam.name" placeholder="请输入姓名"/>
<template #label><span title="员工姓名">员工姓名</span></template>
<JInput v-model:value="queryParam.name" placeholder="请输入员工姓名" />
</a-form-item>
</a-col>
<a-col :lg="6">
<a-form-item name="paramsTime">
<template #label><span title="申请日期">申请日期</span></template>
<a-date-picker v-model:value="queryParam.paramsTime" placeholder="请选择申请日期" value-format="YYYY-MM-DD" allow-clear/>
<template #label><span title="邀请日期">邀请日期</span></template>
<a-date-picker v-model:value="queryParam.paramsTime" placeholder="请选择邀请日期" value-format="YYYY-MM-DD"
allow-clear />
</a-form-item>
</a-col>
<a-col :lg="6">
<a-form-item name="status">
<template #label><span title="邀请状态">邀请状态</span></template>
<a-select v-model:value="queryParam.status" placeholder="请选择邀请状态" style="width: 200px" :disabled="false">
<a-select-option value="1">待确认</a-select-option>
<a-select-option value="2">已接受</a-select-option>
<a-select-option value="3">已拒绝</a-select-option>
</a-select>
<a-select v-model:value="queryParam.status" placeholder="请选择邀请状态" style="width: 200px" :disabled="false">
<a-select-option value="1">待确认</a-select-option>
<a-select-option value="2">已接受</a-select-option>
<a-select-option value="3">已拒绝</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
@ -43,7 +44,7 @@
<BasicTable @register="registerTable">
<!--插槽:table标题-->
<template #tableTitle>
<a-button type="primary" @click="handleInvidedList" preIcon="ant-design:user-add-outlined">邀请</a-button>
<a-button type="primary" @click="handleInvidedList" preIcon="ant-design:user-add-outlined">邀请员工</a-button>
</template>
<!--操作栏-->
<template #action="{ record }">
@ -87,7 +88,7 @@ const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
tableProps: {
title: '员工申请',
api: list,
columns:columns1,
columns: columns1,
canResize: false,
useSearchForm: false,
actionColumn: {
@ -120,7 +121,7 @@ const labelCol = reactive({
xs: 24,
sm: 4,
xl: 6,
xxl: 4
xxl: 6
});
const wrapperCol = reactive({
xs: 24,
@ -155,7 +156,7 @@ function handleDetail(record: Recordable) {
* 成功回调
*/
function handleSuccess() {
(selectedRowKeys.value = []) && reload();
reload();
}
/**

16
src/views/admin/employeesapply/components/EmployeesApplyForm.vue
View File

@ -10,8 +10,8 @@
<!-- <span>基本信息</span> -->
</a-col>
<a-col :span="12">
<a-form-item label="姓名" v-bind="validateInfos.name" id="EmployeesApplyForm-name" name="name">
<a-input v-model:value="formData.name" placeholder="请输入姓名" disabled allow-clear></a-input>
<a-form-item label="员工姓名" v-bind="validateInfos.name" id="EmployeesApplyForm-name" name="name">
<a-input v-model:value="formData.name" placeholder="请输入员工姓名" disabled allow-clear></a-input>
<!-- <span>{{ formData.name }}</span> -->
</a-form-item>
</a-col>
@ -22,16 +22,16 @@
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="性别" v-bind="validateInfos.sex" id="EmployeesApplyForm-sex" name="sex">
<a-input v-model:value="formData.sex" placeholder="请输入性别" disabled allow-clear></a-input>
<a-form-item label="员工性别" v-bind="validateInfos.sex" id="EmployeesApplyForm-sex" name="sex">
<a-input v-model:value="formData.sex" placeholder="请输入员工性别" disabled allow-clear></a-input>
<!-- <j-dict-select-tag type='radio' v-model:value="formData.sex" dictCode="sex" placeholder="请选择性别" disabled
allow-clear /> -->
<!-- <span>{{ formData.sex }}</span> -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="年龄" v-bind="validateInfos.sex" id="EmployeesApplyForm-sex" name="sex">
<a-input v-model:value="ageVal" placeholder="请输入年龄" disabled allow-clear></a-input>
<a-form-item label="员工年龄" v-bind="validateInfos.sex" id="EmployeesApplyForm-sex" name="sex">
<a-input v-model:value="ageVal" placeholder="请输入员工年龄" disabled allow-clear></a-input>
<!-- <span> {{ handleComputedAge(formData.dateOfBirth) }}</span> -->
</a-form-item>
</a-col>
@ -168,7 +168,7 @@
<a-tab-pane key="1" tab="身份证">
<a-row>
<a-col :span="12">
<a-form-item label="身份证人像面" v-bind="validateInfos.idCardPositive"
<a-form-item label="人像面" v-bind="validateInfos.idCardPositive"
id="BizEmployeesInfoForm-idCardPositive" name="idCardPositive">
<j-image-upload v-if="!!formData.idCardPositive" :fileMax="1" :bizPath="`employeesZzxx`"
:value="opeMediaAddress + formData.idCardPositive" disabled></j-image-upload>
@ -176,7 +176,7 @@
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="身份证国徽面" v-bind="validateInfos.idCardNegative"
<a-form-item label="国徽面" v-bind="validateInfos.idCardNegative"
id="BizEmployeesInfoForm-idCardNegative" name="idCardNegative">
<j-image-upload v-if="!!formData.idCardNegative" :fileMax="1" :bizPath="`employeesZzxx`"
:value="opeMediaAddress + formData.idCardNegative" disabled></j-image-upload>

2
src/views/admin/employeesapply/components/EmployeesApplyModal.vue
View File

@ -10,7 +10,7 @@
</EmployeesApplyForm>
</a-drawer>
<!-- 可邀请邀请列表 -->
<a-drawer :title="'邀请'" width="1000px" :visible="invidedVisible" :closable="true" :footer-style="{ textAlign: 'right' }"
<a-drawer :title="'邀请员工'" width="1000px" :visible="invidedVisible" :closable="true" :footer-style="{ textAlign: 'right' }"
:bodyStyle="{ padding: '14px' }" @close="handleInvidedCancel">
<template #footer>
<a-button type="primary" style="margin-right: 8px" @click="handleInvidedCancel">关闭</a-button>

2
src/views/biz/bizEmployeesInfo/BizEmployeesInfo.data.ts
View File

@ -6,7 +6,7 @@ import { getWeekMonthQuarterYear } from '/@/utils';
//列表数据
export const columns: BasicColumn[] = [
{
title: '姓名',
title: '员工姓名',
align: "center",
dataIndex: 'name'
},

54
src/views/biz/bizEmployeesInfo/BizEmployeesInfoList.vue
View File

@ -7,8 +7,8 @@
<a-row :gutter="24">
<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>
<template #label><span title="员工姓名">员工姓名</span></template>
<j-input placeholder="请输入员工姓名" v-model:value="queryParam.name" allow-clear></j-input>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
@ -17,6 +17,8 @@
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset"
style="margin-left: 8px">重置</a-button>
<a-button type="primary" preIcon="ant-design:user-add-outlined" style="margin-left: 8px"
@click="invidedEmployeesFunc()">邀请员工</a-button>
<!-- <a-button type="primary" v-auth="'bizEmployeesInfo:biz_employees_info:add'" @click="handleAdd" preIcon="ant-design:plus-outlined" style="margin-left: 8px"> 新增</a-button> -->
</a-col>
</span>
@ -26,8 +28,8 @@
</div>
<a-row>
<a-col v-for="(item, index) in dataList" :key="index"
:style="{ 'padding-right': (index + 1) % 4 === 0 ? '0px' : '14px','margin-bottom':'14px' }" :xs="24" :sm="24" :md="12" :lg="12" :xl="8"
:xxl="6">
:style="{ 'padding-right': (index + 1) % 4 === 0 ? '0px' : '14px', 'margin-bottom': '14px' }" :xs="24" :sm="24"
:md="12" :lg="12" :xl="8" :xxl="6">
<a-row style="padding: 14px;background-color: white;border-radius: 10px;height: 230px;">
<a-col :span="4" style="padding-left: 8px;">
<img :src="handleHeadPath(item.headPath)" style="width: 48px;height:48px;border-radius: 45px;" />
@ -41,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,7 +99,7 @@
<a-menu>
<a-menu-item @click="handleEdit(item)">编辑</a-menu-item>
<a-menu-item @click="handleFwbq(item)">指令标签</a-menu-item>
<a-menu-item @click="handleFpzh(item)">分配账号</a-menu-item>
<!-- <a-menu-item @click="handleFpzh(item)">分配账号</a-menu-item> -->
<a-menu-item @click="handlePerssion(item)">权限标签</a-menu-item>
</a-menu>
</template>
@ -128,6 +130,16 @@
<UserDrawer @register="registerDrawer" @success="handleSuccess" />
<!--角色菜单授权抽屉-->
<RolePermissionDrawer @register="rolePermissionDrawer" />
<a-drawer :title="'邀请员工'" width="1400px" :visible="visible" :closable="true" :footer-style="{ textAlign: 'right' }"
:bodyStyle="{ padding: '14px' }" @close="handleCancel">
<template #footer>
<a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
</template>
<EmployeesInvidedList v-if="visible" ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit"
:formBpm="false">
</EmployeesInvidedList>
</a-drawer>
</div>
</template>
@ -144,14 +156,15 @@ import { Pagination } from 'ant-design-vue';
import { useDrawer } from '/@/components/Drawer';
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 RolePermissionDrawer from './components/RolePermissionDrawer.vue';
import EmployeesInvidedList from '/@/views/admin/employeesapply/EmployeesInvidedList.vue'
const [rolePermissionDrawer, { openDrawer: openRolePermissionDrawer }] = useDrawer();
const [rolePermissionDrawer, { openDrawer: openRolePermissionDrawer }] = useDrawer();
const APagination = Pagination;
//注册drawer
const [registerDrawer, { openDrawer }] = useDrawer();
const visible = ref<boolean>(false);
const formRef = ref();
const queryParam = reactive<any>({});
const registerModal = ref();
@ -165,20 +178,20 @@ const labelCol = reactive({
xs: 24,
sm: 4,
xl: 6,
xxl: 4
xxl: 5
});
const wrapperCol = reactive({
xs: 24,
sm: 20,
});
/**
* 角色授权弹窗
*/
function handlePerssion(record) {
console.log("🚀 ~ handlePerssion ~ record:", record.id)
openRolePermissionDrawer(true, { roleId: record.id });
}
/**
* 角色授权弹窗
*/
function handlePerssion(record) {
console.log("🚀 ~ handlePerssion ~ record:", record.id)
openRolePermissionDrawer(true, { roleId: record.id });
}
//当没有员工头像时，默认展示企业logo
function handleHeadPath(headPath) {
console.log('headPath--->', headPath);
@ -292,6 +305,13 @@ function reload() {
})
}
function invidedEmployeesFunc() {
visible.value = true;
}
function handleCancel() {
visible.value = false;
}
// 自动请求并暴露内部方法
onMounted(() => {

58
src/views/biz/bizEmployeesInfo/components/BizEmployeesInfoForm.vue
View File

@ -27,24 +27,21 @@
name="EmployeesApplyForm">
<a-row class="card-class">
<a-col :span="12">
<a-form-item label="姓名" v-bind="validateInfos.name" id="EmployeesApplyForm-name"
<a-form-item label="员工姓名" v-bind="validateInfos.name" id="EmployeesApplyForm-name"
name="name">
<a-input v-model:value="formData.name" placeholder="请输入姓名" disabled
allow-clear></a-input>
<a-input v-model:value="formData.name" disabled></a-input>
<!-- <span>{{ formData.name }}</span> -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="联系电话" v-bind="validateInfos.tel" id="EmployeesApplyForm-tel" name="tel">
<a-input v-model:value="formData.tel" placeholder="请输入联系电话" disabled
allow-clear></a-input>
<a-input v-model:value="formData.tel" disabled></a-input>
<!-- <span>{{ formData.tel }}</span> -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="性别" v-bind="validateInfos.sex" id="EmployeesApplyForm-sex" name="sex">
<a-input v-model:value="formData.sex" placeholder="请输入性别" disabled
allow-clear></a-input>
<a-input v-model:value="formData.sex" disabled></a-input>
<!-- <j-dict-select-tag type='radio' v-model:value="formData.sex" dictCode="sex" placeholder="请选择性别" disabled
allow-clear /> -->
<!-- <span>{{ formData.sex }}</span> -->
@ -52,30 +49,28 @@
</a-col>
<a-col :span="12">
<a-form-item label="年龄" v-bind="validateInfos.sex" id="EmployeesApplyForm-sex" name="sex">
<a-input v-model:value="ageVal" placeholder="请输入年龄" disabled allow-clear></a-input>
<a-input v-model:value="ageVal" disabled></a-input>
<!-- <span> {{ handleComputedAge(formData.dateOfBirth) }}</span> -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="出生日期" v-bind="validateInfos.dateOfBirth"
id="EmployeesApplyForm-dateOfBirth" name="dateOfBirth">
<a-date-picker placeholder="请选择出生日期" v-model:value="formData.dateOfBirth"
value-format="YYYY-MM-DD" style="width: 100%" disabled allow-clear />
<a-date-picker v-model:value="formData.dateOfBirth" value-format="YYYY-MM-DD"
style="width: 100%" disabled />
<!-- <span>{{ formData.dateOfBirth }}</span> -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="民族" v-bind="validateInfos.national" id="EmployeesApplyForm-national"
name="national">
<a-input v-model:value="formData.national" placeholder="请输入民族" disabled
allow-clear></a-input>
<a-input v-model:value="formData.national" disabled></a-input>
<!-- <span>{{ formData.national }}</span> -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="身份证号">
<a-input v-model:value="formData.idCard" placeholder="请输入身份证号" disabled
allow-clear></a-input>
<a-input v-model:value="formData.idCard" disabled></a-input>
<!-- <span>{{ formData.idCard }}</span> -->
</a-form-item>
</a-col>
@ -84,24 +79,21 @@
id="EmployeesApplyForm-marriedOrNot" name="marriedOrNot">
<!-- <j-dict-select-tag type='radio' v-model:value="formData.marriedOrNot" dictCode="married_or_not"
placeholder="请选择婚否" disabled allow-clear /> -->
<a-input v-model:value="formData.marriedOrNot" placeholder="请输入婚否" disabled
allow-clear></a-input>
<a-input v-model:value="formData.marriedOrNot" disabled></a-input>
<!-- <span>{{ formData.marriedOrNot }}</span> -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="身高(cm)" v-bind="validateInfos.height" id="EmployeesApplyForm-height"
name="height">
<a-input-number v-model:value="formData.height" placeholder="请输入身高" style="width: 100%"
disabled />
<a-input-number v-model:value="formData.height" style="width: 100%" disabled />
<!-- <span>{{ formData.height }}cm</span> -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="体重(kg)" v-bind="validateInfos.weight" id="EmployeesApplyForm-weight"
name="weight">
<a-input-number v-model:value="formData.weight" placeholder="请输入体重" style="width: 100%"
disabled />
<a-input-number v-model:value="formData.weight" style="width: 100%" disabled />
<!-- <span>{{ formData.weight }}kg</span> -->
</a-form-item>
</a-col>
@ -118,8 +110,7 @@
id="EmployeesApplyForm-healthStatus" name="healthStatus">
<!-- <j-dict-select-tag type='radio' v-model:value="formData.healthStatus" dictCode="health_status" disabled
placeholder="请选择健康状况" allow-clear /> -->
<a-input v-model:value="formData.healthStatus" placeholder="请输入健康状况" style="width: 100%"
disabled />
<a-input v-model:value="formData.healthStatus" style="width: 100%" disabled />
<!-- <span>{{ formData.healthStatus }}</span> -->
</a-form-item>
</a-col>
@ -128,40 +119,36 @@
id="EmployeesApplyForm-politicalAppearance" name="politicalAppearance">
<!-- <j-dict-select-tag v-model:value="formData.politicalAppearance" dictCode="political_appearance" disabled
placeholder="请选择政治面貌" allow-clear /> -->
<a-input v-model:value="formData.politicalAppearance" placeholder="请输入政治面貌"
style="width: 100%" disabled />
<a-input v-model:value="formData.politicalAppearance" style="width: 100%" disabled />
<!-- <span>{{ formData.politicalAppearance }}</span> -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="户籍所在地" v-bind="validateInfos.houseAddress"
id="EmployeesApplyForm-houseAddress" name="houseAddress">
<a-textarea v-model:value="formData.houseAddress" placeholder="请输入户籍所在地" disabled
allow-clear :autosize="true"></a-textarea>
<a-textarea v-model:value="formData.houseAddress" disabled
:autosize="true"></a-textarea>
<!-- <span>{{ formData.houseAddress }}</span> -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="紧急联系人" v-bind="validateInfos.emergencyContact"
id="EmployeesApplyForm-emergencyContact" name="emergencyContact">
<a-input v-model:value="formData.emergencyContact" placeholder="请输入紧急联系人" disabled
allow-clear></a-input>
<a-input v-model:value="formData.emergencyContact" disabled></a-input>
<!-- <span>{{ formData.emergencyContact }}</span> -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="紧急联系人电话" v-bind="validateInfos.emergencyTel"
id="EmployeesApplyForm-emergencyTel" name="emergencyTel">
<a-input v-model:value="formData.emergencyTel" placeholder="请输入紧急联系人电话" disabled
allow-clear></a-input>
<a-input v-model:value="formData.emergencyTel" disabled></a-input>
<!-- <span>{{ formData.emergencyTel }}</span> -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="与本人关系" v-bind="validateInfos.emergencyRelationship"
id="EmployeesApplyForm-emergencyRelationship" name="emergencyRelationship">
<a-input v-model:value="formData.emergencyRelationship" placeholder="请输入紧急联系人与本人关系"
disabled allow-clear></a-input>
<a-input v-model:value="formData.emergencyRelationship" disabled></a-input>
<!-- <span>{{ formData.emergencyRelationship }}</span> -->
</a-form-item>
</a-col>
@ -170,16 +157,15 @@
id="EmployeesApplyForm-hukouNature" name="hukouNature">
<!-- <j-dict-select-tag type='radio' v-model:value="formData.hukouNature" dictCode="hukou_nature" disabled
placeholder="请选择户口性质" allow-clear /> -->
<a-input v-model:value="formData.hukouNature" placeholder="请输入户口性质" disabled
allow-clear></a-input>
<a-input v-model:value="formData.hukouNature" disabled></a-input>
<!-- <span>{{ formData.hukouNature }}</span> -->
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="现住址" v-bind="validateInfos.currentAddress"
id="EmployeesApplyForm-currentAddress" name="currentAddress">
<a-textarea v-model:value="formData.currentAddress" placeholder="请输入现住址" disabled
allow-clear :autosize="true"></a-textarea>
<a-textarea v-model:value="formData.currentAddress" disabled
:autosize="true"></a-textarea>
<!-- <span>{{ formData.currentAddress }}</span> -->
</a-form-item>
</a-col>

13
src/views/services/serviceTag/ServiceTag.data.ts
View File

@ -2,19 +2,24 @@ import {BasicColumn} from '/@/components/Table';
//列表数据
export const columns: BasicColumn[] = [
{
title: '指令标签名称',
title: '员工标签',
align: "center",
dataIndex: 'tagName'
},
{
title: '备注',
title: '标签备注',
align: "center",
dataIndex: 'description'
},
{
title: '排序',
title: '创建人',
align: "center",
dataIndex: 'sort'
dataIndex: 'createBy_dictText'
},
{
title: '创建时间',
align: "center",
dataIndex: 'createTime'
},
{
title: '是否启用',

212
src/views/services/serviceTag/ServiceTagList copy.vue Normal file
View File

@ -0,0 +1,212 @@
<template>
<div class="p-2">
<!--查询区域-->
<div class="jeecg-basic-table-form-container">
<a-form ref="formRef" :model="searchForm" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-row :gutter="24">
<a-col :lg="6">
<a-form-item name="tagName">
<template #label><span title="员工标签名称">员工标签</span></template>
<a-input v-model:value="searchForm.tagName" allow-clear />
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
<a-col :lg="6">
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd" style="margin-left: 8px">新增员工标签</a-button>
</a-col>
</span>
</a-col>
</a-row>
</a-form>
</div>
<a-row style="margin-top: -5px;">
<a-col v-for="directive of tableData.records" :key="directive.id" style="padding: 7px 14px 3px 0;height: 235px;" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6" >
<a-row style="padding: 5px;background-color: white;border-radius: 8px;height: 220px;">
<a-col :span="4" style="padding-left:10px;">
<div class="bjclass">
<img src="/src/assets/images/logo.png" style="width: 40px;height:40px;margin-top: 10px;" />
</div>
</a-col>
<a-col :span="20" style="padding-left: 15px;">
<div>
<span class="titleOne">{{ directive.tagName }}</span>
</div>
<div style="height: 130px">
<span class="ellipsis-two-lines" :title="directive.description">{{ directive.description }}</span>
</div>
<div style="color: #857f7f;">
<span style="float:left;"><Icon icon="ant-design:user-add-outlined" :size="18" /><span style="margin-left:5px;">{{ directive.createBy_dictText }}</span></span>
<span style="margin-left: 15px;float:left;"><Icon icon="ant-design:field-time-outlined" :size="20" /><span style="margin-left:5px;font-size:16px;">{{ directive.createTime.substring(0,10) }}</span></span>
<span style="margin-right: -10px;float:right;">
<a-dropdown :trigger="['hover']" placement="topRight">
<a-button type="link"><Icon icon="ant-design:more-outlined" :size="20" /></a-button>
<template #overlay>
<a-menu>
<a-menu-item @click="tagEdit(directive)">
<template #icon></template>
编辑
</a-menu-item>
<a-menu-item>
<a-popconfirm title="是否确认删除？" ok-text="确认" cancel-text="取消" @confirm="remove(directive)">
删除
</a-popconfirm>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</span>
</div>
</a-col>
</a-row>
</a-col>
</a-row>
<div style="float:right;bottom: 20px;z-index: 999;padding: 8px 16px;border-radius: 4px;display: flex;align-items: center;">
<span style="margin-right: 10px;">共 {{ tableData.total }} 条数据</span>
<Pagination showLessItems v-model:current="pageParams.pageNo" :pageSize="pageParams.pageSize" size="small"
show-quick-jumper :total="tableData.total" @change="queryList" />
</div>
</div>
<!-- 表单区域 -->
<ServiceTagModal ref="registerModal" @success="handleSuccess"></ServiceTagModal>
</template>
<script lang="ts" name="serviceTag-serviceTag" setup>
import { ref, reactive, onMounted } from 'vue';
import ServiceTagModal from './components/ServiceTagModal.vue'
import { list, queryById, deleteOne } from './ServiceTag.api'
import { Pagination } from 'ant-design-vue';
const registerModal = ref();
const searchForm = ref({})
const tableData = ref({})
const labelCol = reactive({
xs:24,
sm:6,
xl:6,
xxl:6
});
const wrapperCol = reactive({
xs: 24,
sm: 24,
});
const pageParams = ref({ pageNo: 1, pageSize: 12 })
/**
* 搜索
*/
function searchQuery() {
queryList({})
}
/**
* 重置
*/
function searchReset() {
searchForm.value = {}
queryList({})
}
/**
* 新增
*/
function handleAdd() {
registerModal.value.disableSubmit = false;
registerModal.value.add();
}
/**
* 成功回调
*/
function handleSuccess() {
queryList({})
}
/**
* 数据查询
*/
function queryList() {
list({ pageNo: pageParams.value.pageNo, pageSize: pageParams.value.pageSize, tagName: searchForm.value.tagName }).then(res => {
tableData.value = res
})
}
/**
* 编辑
* @param data
*/
function tagEdit(data) {
queryById({ id: data.id }).then(item => {
registerModal.value.edit(item);
})
}
/**
* 移除
* @param data
*/
function remove(data) {
deleteOne({ id: data.id }, handleSuccess())
}
onMounted(() => {
queryList({ pageNo: 1, pageSize: 12 })
})
</script>
<style lang="less" scoped>
.jeecg-basic-table-form-container {
padding: 0;
.table-page-search-submitButtons {
display: block;
margin-bottom: 24px;
white-space: nowrap;
}
.query-group-cust {
min-width: 100px !important;
}
.query-group-split-cust {
width: 30px;
display: inline-block;
text-align: center
}
.ant-form-item:not(.ant-form-item-with-help) {
margin-bottom: 16px;
height: 32px;
}
:deep(.ant-picker),
:deep(.ant-input-number) {
width: 100%;
}
}
.bjclass{
text-align: center;
margin-top: 16px;
border-radius: 50%;
width: 60px;
height: 60px;
background: linear-gradient(to bottom, #fff, #efe9e9);
}
.titleOne {
font-size: 15px;
font-weight: 600;
height: 40px;
line-height: 40px;
margin-bottom: 10px;
}
.ellipsis-two-lines {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 限制文本为2行 */
overflow: hidden;
text-overflow: ellipsis;
line-height:24px;color: #5a5a5a;
}
</style>

307
src/views/services/serviceTag/ServiceTagList.vue
View File

@ -2,134 +2,175 @@
<div class="p-2">
<!--查询区域-->
<div class="jeecg-basic-table-form-container">
<a-form ref="formRef" :model="searchForm" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol"
:wrapper-col="wrapperCol">
<a-row :gutter="24">
<a-col :lg="6">
<a-form-item name="tagName">
<template #label><span title="指令标签名称">指令标签</span></template>
<a-input v-model:value="searchForm.tagName" allow-clear />
<template #label><span title="员工标签">员工标签</span></template>
<a-input v-model:value="queryParam.tagName" allow-clear placeholder="请输入员工标签"/>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
<a-col :lg="6">
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd" style="margin-left: 8px">新增</a-button>
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset"
style="margin-left: 8px">重置</a-button>
</a-col>
</span>
</a-col>
</a-row>
</a-form>
</div>
<a-row style="margin-top: -5px;">
<a-col v-for="directive of tableData.records" :key="directive.id" style="padding: 7px 14px 3px 0;height: 235px;" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6" >
<a-row style="padding: 5px;background-color: white;border-radius: 8px;height: 220px;">
<a-col :span="4" style="padding-left:10px;">
<div class="bjclass">
<img src="/src/assets/images/logo.png" style="width: 40px;height:40px;margin-top: 10px;" />
</div>
</a-col>
<a-col :span="20" style="padding-left: 15px;">
<div>
<span class="titleOne">{{ directive.tagName }}</span>
</div>
<div style="height: 130px">
<span class="ellipsis-two-lines" :title="directive.description">{{ directive.description }}</span>
</div>
<div style="color: #857f7f;">
<span style="float:left;"><Icon icon="ant-design:user-add-outlined" :size="18" /><span style="margin-left:5px;">{{ directive.createBy_dictText }}</span></span>
<span style="margin-left: 15px;float:left;"><Icon icon="ant-design:field-time-outlined" :size="20" /><span style="margin-left:5px;font-size:16px;">{{ directive.createTime.substring(0,10) }}</span></span>
<span style="margin-right: -10px;float:right;">
<a-dropdown :trigger="['hover']" placement="topRight">
<a-button type="link"><Icon icon="ant-design:more-outlined" :size="20" /></a-button>
<template #overlay>
<a-menu>
<a-menu-item @click="tagEdit(directive)">
<template #icon></template>
编辑
</a-menu-item>
<a-menu-item>
<a-popconfirm title="是否确认删除？" ok-text="确认" cancel-text="取消" @confirm="remove(directive)">
删除
</a-popconfirm>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</span>
</div>
</a-col>
</a-row>
</a-col>
</a-row>
<div style="float:right;bottom: 20px;z-index: 999;padding: 8px 16px;border-radius: 4px;display: flex;align-items: center;">
<span style="margin-right: 10px;">共 {{ tableData.total }} 条数据</span>
<Pagination showLessItems v-model:current="pageParams.pageNo" :pageSize="pageParams.pageSize" size="small"
show-quick-jumper :total="tableData.total" @change="queryList" />
</div>
<!--引用表格-->
<BasicTable @register="registerTable">
<!--插槽:table标题-->
<template #tableTitle>
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd"
style="margin-left: 8px">新增员工标签</a-button>
</template>
<!--操作栏-->
<template #action="{ record }">
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
</template>
<template v-slot:bodyCell="{ column, record, index, text }">
</template>
</BasicTable>
<!-- 表单区域 -->
<ServiceTagModal ref="registerModal" @success="handleSuccess"></ServiceTagModal>
</div>
<!-- 表单区域 -->
<ServiceTagModal ref="registerModal" @success="handleSuccess"></ServiceTagModal>
</template>
<script lang="ts" name="serviceTag-serviceTag" setup>
import { ref, reactive, onMounted } from 'vue';
<script lang="ts" name="serviceInstructionTag-instructionTag" setup>
import { ref, reactive } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { columns, superQuerySchema } from './ServiceTag.data';
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl, saveOrUpdate, queryById } from './ServiceTag.api';
import { downloadFile } from '/@/utils/common/renderUtils';
import ServiceTagModal from './components/ServiceTagModal.vue'
import { list, queryById, deleteOne } from './ServiceTag.api'
import { Pagination } from 'ant-design-vue';
import { useUserStore } from '/@/store/modules/user';
import JInput from "/@/components/Form/src/jeecg/components/JInput.vue";
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import { useMessage } from '/@/hooks/web/useMessage';
const { createMessage } = useMessage();
const formRef = ref();
const queryParam = reactive<any>({});
const toggleSearchStatus = ref<boolean>(false);
const registerModal = ref();
const searchForm = ref({})
const tableData = ref({})
const userStore = useUserStore();
//注册table数据
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
tableProps: {
title: '员工标签',
api: list,
columns,
canResize: false,
useSearchForm: false,
actionColumn: {
width: 160,
fixed: 'right',
},
beforeFetch: async (params) => {
params.column = 'sort'
params.order = 'asc'
return Object.assign(params, queryParam);
},
},
exportConfig: {
name: "分类标签",
url: getExportUrl,
params: queryParam,
},
importConfig: {
url: getImportUrl,
success: handleSuccess
},
});
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
const labelCol = reactive({
xs:24,
sm:6,
xl:6,
xxl:6
});
const wrapperCol = reactive({
xs: 24,
sm: 24,
});
const pageParams = ref({ pageNo: 1, pageSize: 12 })
xs: 24,
sm: 4,
xl: 8,
xxl: 7
});
const wrapperCol = reactive({
xs: 24,
sm: 20,
xl: 16,
xxl: 16
});
// 高级查询配置
const superQueryConfig = reactive(superQuerySchema);
/**
* 搜索
* 高级查询事件
*/
function searchQuery() {
queryList({})
function handleSuperQuery(params) {
Object.keys(params).map((k) => {
queryParam[k] = params[k];
});
searchQuery();
}
/**
* 重置
*/
function searchReset() {
searchForm.value = {}
queryList({})
}
/**
* 新增
* 新增事件
*/
function handleAdd() {
registerModal.value.disableSubmit = false;
registerModal.value.add();
}
/**
* 编辑事件
*/
function handleEdit(record: Recordable) {
registerModal.value.disableSubmit = false;
registerModal.value.edit(record);
}
/**
* 详情
*/
function handleDetail(record: Recordable) {
registerModal.value.disableSubmit = true;
registerModal.value.edit(record);
}
/**
* 删除事件
*/
async function handleDelete(record) {
await deleteOne({ id: record.id }, handleSuccess);
}
/**
* 批量删除事件
*/
async function batchHandleDelete() {
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
}
/**
* 成功回调
*/
function handleSuccess() {
queryList({})
(selectedRowKeys.value = []) && reload();
}
/**
* 数据查询
*/
function queryList() {
list({ pageNo: pageParams.value.pageNo, pageSize: pageParams.value.pageSize, tagName: searchForm.value.tagName }).then(res => {
tableData.value = res
//启用停用
function handleIzEnabled(record, izEnabled_) {
record.izEnabled = izEnabled_
saveOrUpdate(record, true).then((res) => {
if (res.success) {
createMessage.success(res.message);
reload();
} else {
createMessage.warning(res.message);
}
})
}
@ -139,21 +180,72 @@ function queryList() {
*/
function tagEdit(data) {
queryById({ id: data.id }).then(item => {
registerModal.value.disableSubmit = false;
registerModal.value.edit(item);
})
}
/**
* 移除
* @param data
* 操作栏
*/
function remove(data) {
deleteOne({ id: data.id }, handleSuccess())
function getTableAction(record) {
return [
{
label: '编辑',
onClick: tagEdit.bind(null, record),
},
{
label: '详情',
onClick: handleDetail.bind(null, record),
},
{
label: '启用',
ifShow: record.izEnabled == 'N',
popConfirm: {
title: '是否确认启用',
confirm: handleIzEnabled.bind(null, record, 'Y'),
}
},
{
label: '停用',
ifShow: record.izEnabled == 'Y',
popConfirm: {
title: '是否确认停用',
confirm: handleIzEnabled.bind(null, record, 'N'),
}
},
];
}
onMounted(() => {
queryList({ pageNo: 1, pageSize: 12 })
})
/**
* 下拉操作栏
*/
function getDropDownAction(record) {
return [
]
}
/**
* 查询
*/
function searchQuery() {
reload();
}
/**
* 重置
*/
function searchReset() {
formRef.value.resetFields();
selectedRowKeys.value = [];
//刷新数据
reload();
}
</script>
<style lang="less" scoped>
@ -186,27 +278,4 @@ onMounted(() => {
width: 100%;
}
}
.bjclass{
text-align: center;
margin-top: 16px;
border-radius: 50%;
width: 60px;
height: 60px;
background: linear-gradient(to bottom, #fff, #efe9e9);
}
.titleOne {
font-size: 15px;
font-weight: 600;
height: 40px;
line-height: 40px;
margin-bottom: 10px;
}
.ellipsis-two-lines {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 限制文本为2行 */
overflow: hidden;
text-overflow: ellipsis;
line-height:24px;color: #5a5a5a;
}
</style>

81
src/views/services/serviceTag/components/ConfigServiceDirectiveList.vue
View File

@ -10,7 +10,7 @@
<template #label><span title="服务类别">服务类别</span></template>
<j-dict-select-tag type="list" v-model:value="queryParam.categoryId"
:dictCode="`nu_config_service_category,category_name,id,del_flag = 0 and iz_enabled = 'Y' order by sort asc`"
:ignoreDisabled="true" placeholder="请选择服务类别" allow-clear @change="queryParam.typeId = ''"/>
:ignoreDisabled="true" placeholder="请选择服务类别" allow-clear @change="queryParam.typeId = ''" />
</a-form-item>
</a-col>
<a-col :lg="6">
@ -40,45 +40,48 @@
</a-form>
</div>
<!--引用表格-->
<BasicTable @register="registerTable" :scroll="{ x: '100%', y: '32vh' }">
<!--插槽:table标题-->
<template #tableTitle>
</template>
<!--操作栏-->
<template #action="{ record }">
<TableAction :actions="getTableAction(record)" />
</template>
<template v-slot:bodyCell="{ column, record, index, text }">
</template>
</BasicTable>
<a-table :columns="selectedColumns" :data-source="directiveList" :scroll="{ x: '100%', y: '32vh' }"
:pagination="false" size="small">
<template v-slot:bodyCell="{ column, record, index, text }">
<span v-if="column.dataIndex === 'instructionName'">
{{ text || record.instructionTagId_dictText }}
</span>
<span v-if="column.dataIndex === 'categoryName'">
{{ text || record.categoryId_dictText }}
</span>
<span v-if="column.dataIndex === 'typeName'">
{{ text || record.typeId_dictText }}
</span>
<span v-if="column.dataIndex === 'bodyTagList'">
{{ handleTags('', text, '') }}
</span>
<span v-if="column.dataIndex === 'emotionTagList'">
{{ handleTags('', text, '') }}
</span>
<span v-if="column.dataIndex === 'cycleType'">
{{ filterDictTextByCache('period_type', text) }}
</span>
</template>
<template #action="{ record }">
<a @click="removeDirective(record.id)">移除</a>
</template>
</a-table>
<div style="height: 370px;background-color: white;border-radius: 14px;">
<BasicTable @register="registerTable" :scroll="{ x: '100%', y: 240 }">
<!--插槽:table标题-->
<template #tableTitle>
</template>
<!--操作栏-->
<template #action="{ record }">
<TableAction :actions="getTableAction(record)" />
</template>
<template v-slot:bodyCell="{ column, record, index, text }">
</template>
</BasicTable>
</div>
<div style="height: 328px; margin-top: 14px;background-color: white;border-radius: 14px;padding: 14px;">
<a-table :columns="selectedColumns" :data-source="directiveList" :scroll="{ x: '100%', y: 260 }"
:pagination="false" size="small">
<template v-slot:bodyCell="{ column, record, index, text }">
<span v-if="column.dataIndex === 'instructionName'">
{{ text || record.instructionTagId_dictText }}
</span>
<span v-if="column.dataIndex === 'categoryName'">
{{ text || record.categoryId_dictText }}
</span>
<span v-if="column.dataIndex === 'typeName'">
{{ text || record.typeId_dictText }}
</span>
<span v-if="column.dataIndex === 'bodyTagList'">
{{ handleTags('', text, '') }}
</span>
<span v-if="column.dataIndex === 'emotionTagList'">
{{ handleTags('', text, '') }}
</span>
<span v-if="column.dataIndex === 'cycleType'">
{{ filterDictTextByCache('period_type', text) }}
</span>
</template>
<template #action="{ record }">
<a @click="removeDirective(record.id)">移除</a>
</template>
</a-table>
</div>
<!-- 表单区域 -->
<ConfigServiceDirectiveModal ref="registerModal" @success="handleSuccess"></ConfigServiceDirectiveModal>
</div>

35
src/views/services/serviceTag/components/ServiceTagForm.vue
View File

@ -2,34 +2,31 @@
<a-spin :spinning="confirmLoading">
<JFormContainer :disabled="disabled">
<template #detail>
<a-form ref="formRef" class="antd-modal-form" layout="vertical" :labelCol="labelCol" :wrapperCol="wrapperCol"
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
name="DirectiveTagForm">
<a-row>
<a-col :span="24">
<a-form-item label="指令标签名称" v-bind="validateInfos.tagName" id="DirectiveTagForm-tagName" name="tagName">
<a-input v-model:value="formData.tagName" placeholder="请输入指令标签名称" allow-clear :maxlength="16"
:showCount="true"></a-input>
<a-row :gutter="24">
<!-- 左侧部分：占12列 -->
<a-col :span="12">
<a-form-item label="员工标签" v-bind="validateInfos.tagName" id="DirectiveTagForm-tagName" name="tagName">
<a-input v-model:value="formData.tagName" placeholder="请输入员工标签" :maxlength="16" :allow-clear="!disabled"
:showCount="!disabled"></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="是否启用" v-bind="validateInfos.izEnabled" id="DirectiveTagForm-izEnabled"
name="izEnabled">
name="izEnabled" style="margin-top: 27px;">
<j-dict-select-tag type='radio' v-model:value="formData.izEnabled" dictCode="iz_enabled"
placeholder="是否启用" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<!-- 右侧部分：占12列 -->
<a-col :span="12">
<a-form-item label="备注" v-bind="validateInfos.description" id="DirectiveTagForm-description"
name="description">
<a-textarea v-model:value="formData.description" :rows="16" placeholder="请输入备注" :maxlength="200"
:showCount="true" />
<a-textarea v-model:value="formData.description" :rows="4" placeholder="请输入备注" :maxlength="100"
:showCount="!disabled" />
</a-form-item>
</a-col>
<!-- <a-col :span="24">
<a-form-item label="排序" v-bind="validateInfos.sort" id="DirectiveTagForm-sort" name="sort">
<a-input-number v-model:value="formData.sort" placeholder="请输入排序" style="width: 100%" />
</a-form-item>
</a-col> -->
</a-row>
</a-form>
</template>
@ -66,13 +63,13 @@ const labelCol = ref<any>({
xs: { span: 24 },
sm: { span: 5 },
xl: 16,
xxl: 16
xxl: 5
});
const wrapperCol = ref<any>({
xs: { span: 24 },
sm: { span: 16 },
xl: 24,
xxl: 24
xxl: 19
});
const confirmLoading = ref<boolean>(false);
//表单验证

323
src/views/services/serviceTag/components/ServiceTagModal bk.vue Normal file
View File

@ -0,0 +1,323 @@
<template>
<!-- <j-modal :title="title" :width="width" :maskClosable="false" :fullscreen="true" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
<ServiceTagForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></ServiceTagForm>
</j-modal> -->
<a-drawer v-model:open="visible" v-if="visible" :title="title" width="1290px" :closable="false"
:footer-style="{ textAlign: 'right' }" :bodyStyle="{ padding: '14px' }" @close="handleCancel">
<div style="display:flex;justify-content:space-between">
<div>
<div style="width: 450px;min-height: 85vh;background-color: white;border-radius: 14px;padding:14px;">
<!-- <div style="font-size: 16px;font-weight: bold;margin-bottom: 6px;">指令标签详情</div> -->
<ServiceTagForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false">
</ServiceTagForm>
</div>
</div>
<div
style="width: 800px;display: flex;justify-content: space-between;background-color: white;border-radius: 14px;padding:14px;margin-left: 14px;">
<div style="width:355px;">
<div style="margin-bottom: 28px;display: flex;justify-content: space-between;">
<div style="font-size: 16px;font-weight: bold;">服务指令</div>
<div>
<!-- <a href="javascript:void(0);" @click="handleQuoteDirectives">引用 </a>
<a-divider type="vertical" /> -->
<a href="javascript:void(0);" @click="handleAddDirectives">添加服务指令</a>
</div>
</div>
<div v-for="directive of seletedRecord.directives" :key="directive.id" @click="directiveInfo(directive)"
style="width: 100%;background-color: #f9f9f9;border-radius: 14px;margin-top: 14px;padding: 8px 14px;display: flex;justify-content: space-between;align-items: center;">
<div> {{ directive.directiveName }}</div>
<div>
<a-popconfirm title="是否确认移除？" ok-text="确认" cancel-text="取消" @confirm="deleteDirective(directive.id)">
<a-button class="hover-red-hand" type="link" style="color: grey;"
preIcon="ic:twotone-remove-circle-outline"></a-button>
</a-popconfirm>
</div>
</div>
</div>
<div style="width:1px; background-color: rgb(235 233 233); margin: 0 14px;"></div>
<div style="width:435px;">
<div style="font-size: 16px;font-weight: bold;margin-bottom: 20px;">服务指令详情</div>
<div>
<div class="directiveInfoClass">分类标签：{{ derectiveInfo.instructionName ||
derectiveInfo.instructionTagId_dictText }}</div>
<div class="directiveInfoClass">服务类别：{{ derectiveInfo.categoryName || derectiveInfo.categoryId_dictText }}
</div>
<div class="directiveInfoClass">服务类型：{{ derectiveInfo.typeName || derectiveInfo.typeId_dictText }}</div>
<div class="directiveInfoClass">服务指令名称：{{ derectiveInfo.directiveName }}</div>
<div class="directiveInfoClass">服务时长(分钟)：{{ derectiveInfo.serviceDuration }}</div>
<div class="directiveInfoClass">超时时长(分钟)：{{ derectiveInfo.timeoutDuration }}</div>
<div class="directiveInfoClass">服务说明：{{ derectiveInfo.serviceContent }}</div>
<div class="directiveInfoClass">语音文件：
<span v-if="!derectiveInfo.mp3FileMedia">暂无文件</span>
<audio controls disabled="false" v-else>
<source :src="opeMediaAddress + derectiveInfo.mp3FileMedia">
</audio>
</div>
<div class="directiveInfoClass">视频文件：
<span v-if="!derectiveInfo.mp4FileMedia">暂无文件</span>
<video controls v-else>
<source :src="opeMediaAddress + derectiveInfo.mp4FileMedia">
</video>
</div>
</div>
</div>
</div>
</div>
<!-- 服务指令列表编辑页 -->
<a-drawer v-model:open="directiveEditDrawer" title="选择服务指令" width="1400px" :closable="false"
:footer-style="{ textAlign: 'right' }" :body-style="{ padding: 0 }">
<ConfigServiceDirectiveList ref="configServiceDirectiveListRef" :directiveList="seletedRecord.directives"
@deleteDirective="deleteDirective" @addDirective="addDirective">
</ConfigServiceDirectiveList>
<template #footer>
<a-button style="margin-right: 8px" @click="handleDirectiveCancel">关闭</a-button>
<a-button type="primary" @click="handleDirectiveOk">确定</a-button>
</template>
</a-drawer>
<!-- 引用 -->
<a-drawer v-model:open="directiveQuoteDrawer" title="引用指令标签" width="1400px" :closable="false"
:footer-style="{ textAlign: 'right' }">
<ServiceTagList ref="serviceTagListRef"></ServiceTagList>
<template #footer>
<a-button style="margin-right: 8px" @click="handleQuoteDrawCancel">关闭</a-button>
<a-button type="primary" @click="handleQuoteDrawOk">确定</a-button>
</template>
</a-drawer>
<template #footer>
<a-button style="margin-right: 8px" @click="handleCancel">关闭</a-button>
<a-button type="primary" @click="handleOk">确定</a-button>
</template>
</a-drawer>
</template>
<script lang="ts" setup>
import { ref, nextTick, defineExpose, computed } from 'vue';
import ServiceTagForm from './ServiceTagForm.vue'
import ConfigServiceDirectiveList from './ConfigServiceDirectiveList.vue'
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
import ServiceTagList from './ServiceTagList.vue'
import { filterDictTextByCache } from '/@/utils/dict/JDictSelectUtil';
import { useMessage } from '/@/hooks/web/useMessage';
const opeMediaAddress = import.meta.env.VITE_OPE_MEDIA_ADDRESS
const title = ref<string>('');
const visible = ref<boolean>(false);
const disableSubmit = ref<boolean>(false);
const registerForm = ref();
const emit = defineEmits(['directiveOk', 'register', 'success']);
const directiveEditDrawer = ref<boolean>(false);
const configServiceDirectiveListRef = ref()
const derectiveInfo = ref({})
const selectedDirective = ref()
const directiveQuoteDrawer = ref(false)
const serviceTagListRef = ref()
const seletedRecord = ref({ directives: [] })//里面记录了已选择的服务指令，其他页面都需要操作这个对象
const { createMessage } = useMessage();
/**
* 处理体型标签翻译
* @param directive_
*/
function handleBodyTags(prefix, directive_, suffix) {
if (!!directive_.bodyTagList && directive_.bodyTagList.length > 0) {
let str = directive_.bodyTagList.map(item => item.tagName).join('、 ');
return prefix + str + suffix
} else {
return ''
}
}
/**
* 处理情绪标签翻译
* @param directive_
*/
function handleEmotionTags(prefix, directive_, suffix) {
if (!!directive_.emotionTagList && directive_.emotionTagList.length > 0) {
let str = directive_.emotionTagList.map(item => item.tagName).join('、 ');
return prefix + str + suffix
} else {
return ''
}
}
/**
* 新增
*/
function add() {
title.value = '新增员工标签';
visible.value = true;
selectedDirective.value = ''
seletedRecord.value = { directives: [] }
derectiveInfo.value = {}
nextTick(() => {
registerForm.value.add();
});
}
/**
* 编辑
* @param record
*/
function edit(record) {
selectedDirective.value = ''
derectiveInfo.value = {}
seletedRecord.value = record
title.value = disableSubmit.value ? '详情' : '编辑';
visible.value = true;
nextTick(() => {
registerForm.value.edit(record);
});
}
/**
* 确定按钮点击事件
*/
function handleOk() {
registerForm.value.submitForm(seletedRecord.value.directives);
}
/**
* form保存回调事件
*/
function submitCallback() {
handleCancel();
emit('success');
}
/**
* 取消按钮回调事件
*/
function handleCancel() {
visible.value = false;
}
/**
* 新增/编辑服务指令
*/
const handleAddDirectives = () => {
directiveEditDrawer.value = true;
nextTick(() => {
configServiceDirectiveListRef.value.init()
});
};
/**
* 管理服务指令编辑页
*/
function handleDirectiveCancel() {
directiveEditDrawer.value = false;
}
/**
* 保存服务指令编辑结果
*/
function handleDirectiveOk() {
directiveEditDrawer.value = false;
}
/**
* 点击服务指令卡片时触发：右侧展示指令详细信息
* @param directive
*/
function directiveInfo(directive) {
selectedDirective.value = directive.id
derectiveInfo.value = directive
}
/**
* 移除单个服务指令
* @param directiveId
*/
function deleteDirective(directiveId) {
setTimeout(() => {
derectiveInfo.value = {}
}, 200)
seletedRecord.value.directives = seletedRecord.value.directives.filter(item => item.id !== directiveId)
}
/**
* 新增单个服务指令
* @param directive_
*/
function addDirective(directive_) {
let res_ = seletedRecord.value.directives.filter(item => item.id == directive_.id)
if (res_.length > 0) {
createMessage.warning('服务指令已选择');
} else {
createMessage.success('选择成功');
seletedRecord.value.directives.push(directive_)
}
}
/**
* 引用
*/
function handleQuoteDirectives() {
directiveQuoteDrawer.value = true
}
/**
* 处理引用确认操作
*/
function handleQuoteDrawOk() {
directiveQuoteDrawer.value = false
//将数据合并（有去重操作）
seletedRecord.value.directives = [
...seletedRecord.value.directives,
...serviceTagListRef.value.selectedDirective.directives.reduce((acc, current) => {
if (!seletedRecord.value.directives.some((item) => item.id === current.id)) {
acc.push(current);
}
return acc;
}, []),
];
}
/**
* 处理引用取消操作
*/
function handleQuoteDrawCancel() {
directiveQuoteDrawer.value = false
}
defineExpose({
add,
edit,
disableSubmit,
});
</script>
<style lang="less">
/**隐藏样式-modal确定按钮 */
.jee-hidden {
display: none !important;
}
</style>
<style lang="less" scoped>
.selected {
color: rgb(0, 156, 0);
font-weight: bold;
}
.directiveInfoClass {
margin-top: 14px;
color: #707070;
}
.scrollable-content {
height: 70vh;
/* 设置固定高度为视口的50% */
overflow-y: auto;
/* 垂直方向超出时显示滚动条 */
padding-right: 8px;
/* 防止滚动条遮挡内容 */
}
.hover-red-hand:hover {
color: red !important;
cursor: pointer;
}
</style>

447
src/views/services/serviceTag/components/ServiceTagModal.vue
View File

@ -4,65 +4,93 @@
</j-modal> -->
<a-drawer v-model:open="visible" v-if="visible" :title="title" width="1290px" :closable="false"
:footer-style="{ textAlign: 'right' }" :bodyStyle="{ padding: '14px' }" @close="handleCancel">
<div style="display:flex;justify-content:space-between">
<div>
<div style="width: 450px;min-height: 85vh;background-color: white;border-radius: 14px;padding:14px;">
<div style="font-size: 16px;font-weight: bold;margin-bottom: 6px;">指令标签详情</div>
<ServiceTagForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false">
</ServiceTagForm>
</div>
</div>
<div
style="width: 800px;display: flex;justify-content: space-between;background-color: white;border-radius: 14px;padding:14px;margin-left: 14px;">
<div style="width:355px;">
<div style="margin-bottom: 28px;display: flex;justify-content: space-between;">
<div style="font-size: 16px;font-weight: bold;">服务指令</div>
<div>
<a href="javascript:void(0);" @click="handleQuoteDirectives">引用 </a>
<a-divider type="vertical" />
<a href="javascript:void(0);" @click="handleAddDirectives">新增</a>
</div>
</div>
<div v-for="directive of seletedRecord.directives" :key="directive.id" @click="directiveInfo(directive)"
style="width: 100%;background-color: #f9f9f9;border-radius: 14px;margin-top: 14px;padding: 8px 14px;display: flex;justify-content: space-between;align-items: center;">
<div> {{ directive.directiveName }}</div>
<div>
<a-popconfirm title="是否确认移除？" ok-text="确认" cancel-text="取消" @confirm="deleteDirective(directive.id)">
<a-button class="hover-red-hand" type="link" style="color: grey;"
preIcon="ic:twotone-remove-circle-outline"></a-button>
</a-popconfirm>
</div>
</div>
</div>
<div style="width:1px; background-color: rgb(235 233 233); margin: 0 14px;"></div>
<div style="width:435px;">
<div style="font-size: 16px;font-weight: bold;margin-bottom: 20px;">服务指令详情</div>
<a-row>
<a-col :span="24" style="height: 180px;background-color: white;border-radius: 14px;padding:14px;">
<ServiceTagForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false">
</ServiceTagForm>
</a-col>
</a-row>
<a-row
style="margin-top: 14px;height:calc(100vh - 328px);background-color: white;border-radius: 14px;padding:14px;">
<a-col :span="15" style="height: 100%; display: flex; flex-direction: column; position: relative;">
<!-- 头部区域，固定高度 -->
<div
style="height:44px; display: flex; justify-content: space-between; align-items: center; padding: 14px 24px 0 14px; flex-shrink: 0; margin-bottom: 14px;">
<div style="font-size: 16px;font-weight: bold;">已选服务指令</div>
<div>
<div class="directiveInfoClass">分类标签：{{ derectiveInfo.instructionName ||
derectiveInfo.instructionTagId_dictText }}</div>
<div class="directiveInfoClass">服务类别：{{ derectiveInfo.categoryName || derectiveInfo.categoryId_dictText }}
<a-button type="primary" size="small" @click="handleAddDirectives">添加服务指令</a-button>
</div>
</div>
<div style="padding: 0 14px; flex-shrink: 0;">
<a-tabs v-model:activeKey="activeTagId" @change="handleTagChange">
<a-tab-pane v-for="tag in tagList" :key="tag.id" :tab="tag.tagName">
<!-- 每个tab下显示对应分类的指令数量（可选） -->
<template #tab>
<span>
{{ tag.tagName }}
<span style="margin-left: 4px; color: #999; font-size: 12px;">
({{ getDirectiveCountByTagId(tag.id) }})
</span>
</span>
</template>
</a-tab-pane>
</a-tabs>
</div>
<!-- 卡片列表区域，可滚动 -->
<div style="flex: 1; overflow-y: auto; padding: 0 14px 14px 14px;">
<div style="display: flex; flex-wrap: wrap; gap: 12px;">
<div v-for="directive of filteredDirectives" :key="directive.id" @click="directiveInfo(directive)"
:class="['directive-card', { 'selected-card': selectedDirective === directive.id }]" style="width: calc(33.33% - 8px); background-color: #f9f9f9; border-radius: 14px;
padding: 12px 14px; box-sizing: border-box; cursor: pointer;
transition: all 0.3s; border: 1px solid transparent;">
<div style="display: flex; justify-content: space-between; align-items: center; gap: 8px;">
<div
style="font-weight: 500; color: #333; font-size: 15px; flex: 1; word-break: break-word; line-height: 1.4;">
{{ directive.directiveName }}
</div>
<div @click.stop style="flex-shrink: 0;">
<a-popconfirm title="是否确认移除？" ok-text="确认" cancel-text="取消" @confirm="deleteDirective(directive.id)">
<a-button class="hover-red-hand" type="link" style="color: grey; padding: 0; height: auto;"
preIcon="ic:twotone-remove-circle-outline"></a-button>
</a-popconfirm>
</div>
</div>
</div>
<div class="directiveInfoClass">服务类型：{{ derectiveInfo.typeName || derectiveInfo.typeId_dictText }}</div>
<div class="directiveInfoClass">服务指令名称：{{ derectiveInfo.directiveName }}</div>
<div class="directiveInfoClass">服务时长(分钟)：{{ derectiveInfo.serviceDuration }}</div>
<div class="directiveInfoClass">超时时长(分钟)：{{ derectiveInfo.timeoutDuration }}</div>
<div class="directiveInfoClass">服务说明：{{ derectiveInfo.serviceContent }}</div>
<div class="directiveInfoClass">语音文件：
<span v-if="!derectiveInfo.mp3FileMedia">暂无文件</span>
<audio controls disabled="false" v-else>
<source :src="opeMediaAddress + derectiveInfo.mp3FileMedia">
</audio>
</div>
<div class="directiveInfoClass">视频文件：
<span v-if="!derectiveInfo.mp4FileMedia">暂无文件</span>
<video controls v-else>
<source :src="opeMediaAddress + derectiveInfo.mp4FileMedia">
</video>
<!-- 空状态展示 -->
<div v-if="filteredDirectives.length === 0" style="width: 100%; padding: 40px 0;">
<a-empty description="暂未选择服务指令" />
</div>
</div>
</div>
</div>
</div>
<!-- 分割线 -->
<div style="position: absolute; right: 0; top: 20px; bottom: 20px; width: 1px; background-color: #f0f0f0;">
</div>
</a-col>
<a-col :span="9" style="padding: 14px 14px 0 24px;">
<div style="font-size: 16px;font-weight: bold;margin-bottom: 20px;">服务指令详情</div>
<div v-if="!!derectiveInfo.directiveName">
<div class="directiveInfoClass">分类标签：{{ derectiveInfo.instructionName ||
derectiveInfo.instructionTagId_dictText }}</div>
<div class="directiveInfoClass">服务类别：{{ derectiveInfo.categoryName || derectiveInfo.categoryId_dictText }}
</div>
<div class="directiveInfoClass">服务类型：{{ derectiveInfo.typeName || derectiveInfo.typeId_dictText }}</div>
<div class="directiveInfoClass">服务指令名称：{{ derectiveInfo.directiveName }}</div>
<div class="directiveInfoClass">服务属性：{{ derectiveInfo.serviceAttributeName }}</div>
<div class="directiveInfoClass">服务时长(分钟)：{{ derectiveInfo.serviceDuration }}</div>
<div class="directiveInfoClass">服务说明：{{ derectiveInfo.serviceContent }}</div>
</div>
<div v-else style="width: 100%; padding: 40px 0;">
<a-empty description="无服务指令" />
</div>
</a-col>
</a-row>
<!-- 服务指令列表编辑页 -->
<a-drawer v-model:open="directiveEditDrawer" title="选择服务指令" width="1400px" :closable="false"
@ -76,25 +104,15 @@
</template>
</a-drawer>
<!-- 引用 -->
<a-drawer v-model:open="directiveQuoteDrawer" title="引用指令标签" width="1400px" :closable="false"
:footer-style="{ textAlign: 'right' }">
<ServiceTagList ref="serviceTagListRef"></ServiceTagList>
<template #footer>
<a-button style="margin-right: 8px" @click="handleQuoteDrawCancel">关闭</a-button>
<a-button type="primary" @click="handleQuoteDrawOk">确定</a-button>
</template>
</a-drawer>
<template #footer>
<a-button style="margin-right: 8px" @click="handleCancel">关闭</a-button>
<a-button type="primary" @click="handleOk">确定</a-button>
<a-button type="primary" @click="handleOk" v-show="!disableSubmit">确定</a-button>
</template>
</a-drawer>
</template>
<script lang="ts" setup>
import { ref, nextTick, defineExpose, computed } from 'vue';
import { ref, nextTick, defineExpose, computed, watch } from 'vue';
import ServiceTagForm from './ServiceTagForm.vue'
import ConfigServiceDirectiveList from './ConfigServiceDirectiveList.vue'
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
@ -147,7 +165,7 @@ function handleEmotionTags(prefix, directive_, suffix) {
* 新增
*/
function add() {
title.value = '新增指令标签';
title.value = '新增员工标签';
visible.value = true;
selectedDirective.value = ''
seletedRecord.value = { directives: [] }
@ -167,8 +185,35 @@ function edit(record) {
seletedRecord.value = record
title.value = disableSubmit.value ? '详情' : '编辑';
visible.value = true;
// 初始化tagList和activeTagId
nextTick(() => {
registerForm.value.edit(record);
// 如果有数据
if (seletedRecord.value.directives.length > 0) {
// 默认选中第一个tag（使用第一个指令的instructionTagId）
const firstDirective = seletedRecord.value.directives[0];
activeTagId.value = firstDirective.instructionTagId;
// 自动选中当前tag下的第一个指令
setTimeout(() => {
// 获取当前tag下的所有指令
const currentTagDirectives = seletedRecord.value.directives.filter(
d => d.instructionTagId === activeTagId.value
);
// 如果当前tag下有指令，选中第一个
if (currentTagDirectives.length > 0) {
const firstDirectiveInTag = currentTagDirectives[0];
selectedDirective.value = firstDirectiveInTag.id;
derectiveInfo.value = firstDirectiveInTag;
}
}, 100); // 稍微延迟一下，确保tagList已经更新
} else {
activeTagId.value = 'all';
}
});
}
@ -211,11 +256,33 @@ function handleDirectiveCancel() {
directiveEditDrawer.value = false;
}
/**
* 保存服务指令编辑结果
*/
/**
* 保存服务指令编辑结果
*/
function handleDirectiveOk() {
directiveEditDrawer.value = false;
// 如果当前没有选中的指令，且存在指令数据，则自动选中第一个标签的第一个指令
if (!selectedDirective.value && seletedRecord.value.directives.length > 0) {
// 如果有数据，默认选中第一个tag
const firstDirective = seletedRecord.value.directives[0];
activeTagId.value = firstDirective.instructionTagId;
// 获取当前tag下的所有指令
const currentTagDirectives = seletedRecord.value.directives.filter(
d => d.instructionTagId === activeTagId.value
);
// 选中第一个指令并更新详情
if (currentTagDirectives.length > 0) {
const firstDirectiveInTag = currentTagDirectives[0];
selectedDirective.value = firstDirectiveInTag.id;
directiveInfo(firstDirectiveInTag);
}
}
}
/**
@ -227,17 +294,183 @@ function directiveInfo(directive) {
derectiveInfo.value = directive
}
/**
* 移除单个服务指令
* @param directiveId
*/
function deleteDirective(directiveId) {
setTimeout(() => {
derectiveInfo.value = {}
}, 200)
seletedRecord.value.directives = seletedRecord.value.directives.filter(item => item.id !== directiveId)
const activeTagId = ref<string>('all'); // 当前选中的tagId，'all'表示全部
const tagList = ref<Array<{ id: string, tagName: string }>>([]); // 标签列表
// 计算属性：获取所有唯一的instructionTagId并生成标签列表
const generateTagList = computed(() => {
const tags = new Map();
// 遍历所有指令，收集唯一的instructionTagId
seletedRecord.value.directives.forEach(directive => {
const tagId = directive.instructionTagId;
const tagName = directive.instructionName || directive.instructionTagId_dictText || tagId;
if (!tags.has(tagId)) {
tags.set(tagId, {
id: tagId,
tagName: tagName
});
}
});
// 转换为数组并按需排序
return Array.from(tags.values());
});
// 监听seletedRecord变化，更新tagList
watch(() => seletedRecord.value.directives, (newVal) => {
tagList.value = generateTagList.value;
// 如果当前选中的tag不在新的tagList中，切换到'all'
if (activeTagId.value !== 'all' && !tagList.value.some(tag => tag.id === activeTagId.value)) {
activeTagId.value = 'all';
}
}, { deep: true, immediate: true });
watch(tagList, (newTagList) => {
// 如果是编辑模式且visible为true，且有数据
if (visible.value && seletedRecord.value.directives.length > 0) {
// 获取当前选中的tag
const currentTag = activeTagId.value;
// 如果当前tag下有指令，但没有选中的指令，则选中第一个
if (currentTag && currentTag !== 'all') {
const currentTagDirectives = seletedRecord.value.directives.filter(
d => d.instructionTagId === currentTag
);
if (currentTagDirectives.length > 0 && !selectedDirective.value) {
const firstDirective = currentTagDirectives[0];
selectedDirective.value = firstDirective.id;
derectiveInfo.value = firstDirective;
}
}
}
}, { immediate: true });
// 计算属性：根据当前选中的tagId过滤指令
const filteredDirectives = computed(() => {
if (activeTagId.value === 'all') {
return seletedRecord.value.directives;
}
return seletedRecord.value.directives.filter(
directive => directive.instructionTagId === activeTagId.value
);
});
// 获取指定tagId下的指令数量
function getDirectiveCountByTagId(tagId: string) {
if (tagId === 'all') {
return seletedRecord.value.directives.length;
}
return seletedRecord.value.directives.filter(d => d.instructionTagId === tagId).length;
}
// 处理tab切换
function handleTagChange(tagId: string) {
activeTagId.value = tagId;
// 切换tab时，自动选中当前tag下的第一个指令
setTimeout(() => {
if (tagId !== 'all') {
const currentTagDirectives = seletedRecord.value.directives.filter(
d => d.instructionTagId === tagId
);
if (currentTagDirectives.length > 0) {
const firstDirective = currentTagDirectives[0];
selectedDirective.value = firstDirective.id;
derectiveInfo.value = firstDirective;
} else {
// 如果当前tag下没有指令，清空详情
derectiveInfo.value = {};
selectedDirective.value = '';
}
} else {
// 如果是"全部"标签，可以选择全部中的第一个指令
if (seletedRecord.value.directives.length > 0) {
const firstDirective = seletedRecord.value.directives[0];
selectedDirective.value = firstDirective.id;
derectiveInfo.value = firstDirective;
} else {
derectiveInfo.value = {};
selectedDirective.value = '';
}
}
}, 50);
}
// 修改删除方法，删除后检查是否需要切换tab
function deleteDirective(directiveId) {
// 记录被删除的指令信息，用于后续判断
const deletedDirective = seletedRecord.value.directives.find(item => item.id === directiveId);
// 先更新数据
seletedRecord.value.directives = seletedRecord.value.directives.filter(item => item.id !== directiveId)
// 删除后检查当前tag是否还有数据
if (activeTagId.value !== 'all') {
const hasDirectives = seletedRecord.value.directives.some(
d => d.instructionTagId === activeTagId.value
);
if (!hasDirectives) {
// 如果当前tag没有数据了，切换到其他tag
if (seletedRecord.value.directives.length > 0) {
// 如果有其他数据，切换到第一个可用的tag
const nextDirective = seletedRecord.value.directives[0];
activeTagId.value = nextDirective.instructionTagId;
// 选中新tag下的第一个指令并调用directiveInfo更新详情
const newTagDirectives = seletedRecord.value.directives.filter(
d => d.instructionTagId === activeTagId.value
);
if (newTagDirectives.length > 0) {
const firstDirective = newTagDirectives[0];
selectedDirective.value = firstDirective.id;
directiveInfo(firstDirective); // 直接调用directiveInfo更新详情
}
} else {
// 如果没有数据了
activeTagId.value = 'all';
derectiveInfo.value = {};
selectedDirective.value = '';
}
} else {
// 如果当前tag还有数据，判断是否需要更新选中的指令
const currentTagDirectives = seletedRecord.value.directives.filter(
d => d.instructionTagId === activeTagId.value
);
if (currentTagDirectives.length > 0) {
// 如果删除的是当前选中的指令，选中当前tag下的第一个指令
if (directiveId === selectedDirective.value) {
const firstDirective = currentTagDirectives[0];
selectedDirective.value = firstDirective.id;
directiveInfo(firstDirective); // 直接调用directiveInfo更新详情
}
// 如果删除的不是当前选中的指令，保持原选中（不需要更新）
}
}
} else {
// 如果是"全部"标签
if (seletedRecord.value.directives.length > 0) {
// 如果删除的是当前选中的指令，选中第一个指令
if (directiveId === selectedDirective.value) {
const firstDirective = seletedRecord.value.directives[0];
selectedDirective.value = firstDirective.id;
directiveInfo(firstDirective); // 直接调用directiveInfo更新详情
}
// 如果删除的不是当前选中的指令，保持原选中（不需要更新）
} else {
derectiveInfo.value = {};
selectedDirective.value = '';
}
}
}
/**
* 新增单个服务指令
* @param directive_
@ -249,6 +482,15 @@ function addDirective(directive_) {
} else {
createMessage.success('选择成功');
seletedRecord.value.directives.push(directive_)
// 自动切换到新增指令所属的tag
activeTagId.value = directive_.instructionTagId;
// 自动选中新添加的指令
setTimeout(() => {
selectedDirective.value = directive_.id;
derectiveInfo.value = directive_;
}, 50);
}
}
@ -320,4 +562,57 @@ defineExpose({
color: red !important;
cursor: pointer;
}
.directive-card {
&:hover {
background-color: #f0f0f0 !important;
border-color: #d9d9d9 !important;
}
&.selected-card {
background-color: #e6f7ff !important;
border-color: #91d5ff !important;
}
}
/* 自定义滚动条样式（可选） */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 3px;
}
::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
&:hover {
background: #a8a8a8;
}
}
:deep(.ant-tabs-nav) {
margin-bottom: 16px !important;
.ant-tabs-tab {
padding: 8px 0;
font-size: 14px;
&:hover {
color: #1890ff;
}
}
.ant-tabs-tab-active {
.ant-tabs-tab-btn {
color: #1890ff;
font-weight: 500;
}
}
}
</style>