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

修改服务指令包页面样式

This commit is contained in:
yangjun 2025-07-15 16:30:33 +08:00
parent 122ef7b5a1
commit fce25d0158
5 changed files with 112 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/services/directivePackage/DirectivePackageList.vue
View File

@ -247,7 +247,7 @@ onMounted(() => {
.cardDivClass:hover{
padding: 5px;background-color: #f4fcff;border-radius: 8px;height: 180px;
box-shadow:
0 0 0 2px #d3d3d3, /* 描边 */
0 0 0 1px #59bffe, /* 描边 */
0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
transform: translate(-2px , -2px); /* 轻微上浮效果 */
}

2
src/views/services/directivePackage/components/ConfigServiceDirective.data.ts
View File

@ -65,7 +65,7 @@ export const selectedColumns: BasicColumn[] = [
{
title: '分类标签',
align: 'center',
dataIndex: 'instructionTagId',
dataIndex: 'instructionTagName',
},
{
title: '服务类别',

53
src/views/services/directivePackage/components/ConfigServiceDirectiveList.vue
View File

@ -5,7 +5,15 @@
<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-col :lg="4">
<a-form-item name="categoryId">
<template #label><span title="服务类别">分类标签</span></template>
<j-dict-select-tag type="list" v-model:value="queryParam.instructionTagId"
:dictCode="`nu_config_service_instruction_tag,instruction_name,id,del_flag = 0 and iz_enabled = 0 order by sort asc`"
:ignoreDisabled="true" placeholder="请选择服务类别" allow-clear :disabled="queryParam.instructionTagId" />
</a-form-item>
</a-col>
<a-col :lg="4">
<a-form-item name="categoryId">
<template #label><span title="服务类别">服务类别</span></template>
<j-dict-select-tag type="list" v-model:value="queryParam.categoryId"
@ -13,7 +21,7 @@
:ignoreDisabled="true" placeholder="请选择服务类别" allow-clear />
</a-form-item>
</a-col>
<a-col :lg="6">
<a-col :lg="4">
<a-form-item name="typeId">
<template #label><span title="服务类型">服务类型</span></template>
<j-dict-select-tag type="list" v-model:value="queryParam.typeId"
@ -21,13 +29,13 @@
:ignoreDisabled="true" allowClear />
</a-form-item>
</a-col>
<a-col :lg="6">
<a-col :lg="4">
<a-form-item name="directiveName">
<template #label><span title="服务指令">服务指令</span></template>
<JInput v-model:value="queryParam.directiveName" placeholder="请输入服务指令名称" allowClear />
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-col :xl="4" :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>
@ -51,15 +59,14 @@
<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 === 'index'">
{{ parseInt(index) + 1 }}
</span>
<span v-if="column.dataIndex === 'instructionTagId'">
{{ filterDictTextByCache('instruction_tag', text) }}
<span v-if="column.dataIndex === 'instructionTagName'">
{{ text || record.instructionTagId_dictText }}
</span>
<span v-if="column.dataIndex === 'categoryName'">
{{ text || record.categoryId_dictText }}
@ -106,6 +113,7 @@ const emit = defineEmits(['deleteDirective', 'addDirective']);
const formRef = ref();
const queryParam = reactive<any>({});
const registerModal = ref();
const directiveInfo = ref<any>({});
//注册table数据
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
tableProps: {
@ -128,15 +136,6 @@ const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
return Object.assign(params, rangerQuery);
},
},
exportConfig: {
name: "服务指令",
url: getExportUrl,
params: queryParam,
},
importConfig: {
url: getImportUrl,
success: handleSuccess
},
});
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
const props = defineProps({
@ -145,16 +144,15 @@ const props = defineProps({
const labelCol = reactive({
xs: 24,
sm: 4,
sm: 8,
xl: 8,
xxl: 6
xxl: 8
});
const wrapperCol = reactive({
xs: 24,
sm: 20,
sm: 16,
});
/**
* 成功回调
*/
@ -162,11 +160,19 @@ function handleSuccess() {
(selectedRowKeys.value = []) && reload();
}
function getInstructionName(record){
console.log("🚀 ~ getInstructionName ~ record:", record)
return "";
}
/**
* 选择
* @param directive_
*/
function handleSelect(directive_) {
console.log("🚀 ~ handleSelect ~ directive_:", directive_)
queryParam.instructionTagId =directive_.instructionTagId
reload();
emit('addDirective', directive_)
}
@ -251,8 +257,15 @@ function handleTags(prefix, tagList, suffix) {
return ' - '
}
}
function edit(record) {
console.log("🚀 ~ edit ~ record:", record)
directiveInfo.value = record
console.log("🚀 ~ edit ~ directiveInfo:", directiveInfo)
queryParam.instructionTagId = record.instructionTagId
}
defineExpose({
edit
});
</script>

33
src/views/services/directivePackage/components/DirectivePackageForm.vue
View File

@ -65,6 +65,7 @@ const formData = reactive<Record<string, any>>({
izEnabled: '0',
startTimeStr: '',
endTimeStr: '',
instructionTagId: '',
});
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 6 } });
@ -177,18 +178,28 @@ async function submitForm(directives) {
confirmLoading.value = false;
return;
}
await saveOrUpdate(model, isUpdate.value)
.then((res) => {
if (res.success) {
createMessage.success(res.message);
emit('ok');
} else {
createMessage.warning(res.message);
}
})
.finally(() => {
var directivesList = model.directives;
if(directivesList.length == 0){
createMessage.warning('请选择服务指令');
confirmLoading.value = false;
});
return;
}else{
model.instructionTagId = directivesList[0].instructionTagId;
}
console.log('model', model);
// confirmLoading.value = false;
await saveOrUpdate(model, isUpdate.value)
.then((res) => {
if (res.success) {
createMessage.success(res.message);
emit('ok');
} else {
createMessage.warning(res.message);
}
})
.finally(() => {
confirmLoading.value = false;
});
}

80
src/views/services/directivePackage/components/DirectivePackageModal.vue
View File

@ -20,12 +20,12 @@
</a-row>
<a-row>
<a-col :span="6" v-for="directive of seletedRecord.directives" :key="directive.id" style="padding: 5px;" @click="directiveInfo(directive)" :class="{ 'selected': selectedDirective === directive.id }">
<div class="directiveClass">
<a-col :span="6" v-for="directive of seletedRecord.directives" :key="directive.id" style="padding: 5px;" @click="directiveInfo(directive)" >
<div class="directiveClass" :class="{ 'selected': selectedDirective === directive.id }">
<div class="fenleiClass">
<a-row>
<a-col :span="12">
{{directive.instructionTagName}}
<a-col :span="12" class="ellipsis-two-lines">
{{directive.instructionTagName||directive.instructionTagId_dictText}}
</a-col>
<a-col :span="12" style="text-align: right;padding-right: 10px;" v-show="selectedDirective === directive.id">
<span style="background-color: #67b4eb;border-radius: 50%;padding: 3px;color: white;width:27px;cursor: pointer;">
@ -38,36 +38,41 @@
</a-row>
</div>
<!-- <div class="fwsjClass">10:00 - 10:10</div> -->
<div class="imgClass" style="margin-top: 10px;"><img :src="directive.previewFile?directive.previewFile:'../../../../assets/images/logo.png'" style="width: 100px;height:100px"/></div>
<div class="imgClass" style="margin-top: 10px;">
<img :src="getImgPath(directive.previewFile)" style="width: 100px;height:100px"/>
</div>
<a-row style="margin-top: 10px;">
<a-col :span="12">
<span style="margin-left:10px;font-size:20px;">{{ directive.directiveName }}</span>
<a-col :span="14">
<span class="ellipsis-two-lines" style="margin-left:10px;font-size:20px;">{{ directive.directiveName }}</span>
</a-col>
<a-col :span="12" style="text-align: right;">
<span class="yuanClass" v-if="directive.serviceContent">
<a-col :span="10" style="text-align: right;">
<span class="yuanClass">
<a-popover title="服务说明">
<template #content>
<p>{{directive.serviceContent}}</p>
<p v-if="directive.serviceContent">{{directive.serviceContent}}</p>
<p v-else>暂无</p>
</template>
<img style="width: 15px;height: 15px;" src="/src/assets/wlb/edit.png"></img>
</a-popover>
</span>
<span class="yuanClass" v-if="directive.mp3File">
<span class="yuanClass">
<a-popover title="音频介绍">
<template #content>
<audio controls disabled="false">
<source :src="getFileAccessHttpUrl(derectiveInfo.mp3FileMedia)">
<audio controls disabled="false" v-if="directive.mp3File">
<source :src="getFileAccessHttpUrl(directive.mp3File)">
</audio>
<span v-else>暂无</span>
</template>
<img style="width: 15px;height: 15px;" src="/src/assets/wlb/mp3.png"></img>
</a-popover>
</span>
<span class="yuanClass" v-if="directive.mp4File">
<span class="yuanClass">
<a-popover title="视频介绍">
<template #content>
<video controls>
<source :src="getFileAccessHttpUrl(derectiveInfo.mp4FileMedia)">
<video controls v-if="directive.mp4File">
<source :src="getFileAccessHttpUrl(directive.mp4File)">
</video>
<span v-else>暂无</span>
</template>
<img style="width: 15px;height: 15px;" src="/src/assets/wlb/mp4.png"></img>
</a-popover>
@ -76,29 +81,29 @@
</a-row>
<div style="margin-top: 10px;">
<div style="display: flex; width:100% ;height: 50rpx;">
<view style="background-color: rgb(240,240,240);width: 115px;height: 30px;border-radius: 5px;position: relative;margin-left: 10px;">
<view style="background-color: rgb(240,240,240);width: 100px;height: 25px;border-radius: 5px;position: relative;margin-left: 10px;">
<view style="position: absolute;top: 0;left: 0;width: 50%;height: 100%;">
<img style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;" src="/src/assets/wlb/wlb-type1.png"></img>
<div style="color: #fff;z-index: 999;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);font-size: 14px;">
<div style="color: #fff;z-index: 999;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);font-size: 12px;">
医保
</div>
</view>
<view style="position: absolute;top: 0;left: 40%;width: 70%;height: 100%;">
<div style="z-index: 999;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);font-size: 14px;margin-left: -2px;">
<div style="z-index: 999;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);font-size: 12px;margin-left: -2px;">
{{directive.izReimbursement=='1'?'报销':'不报销'}}
</div>
</view>
</view>
<view style="background-color: rgb(240,240,240);width: 115px;height: 30px;border-radius: 5px;position: relative;margin-left: 10px;">
<view style="background-color: rgb(240,240,240);width: 100px;height: 25px;border-radius: 5px;position: relative;margin-left: 10px;">
<view style="position: absolute;top: 0;left: 0;width: 50%;height: 100%;">
<img style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;" src="/src/assets/wlb/wlb-type2.png"></img>
<div style="color: #fff;z-index: 999;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);font-size: 14px;">
<div style="color: #fff;z-index: 999;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);font-size: 12px;">
优惠
</div>
</view>
<view style="position: absolute;top: 0;left: 40%;width: 70%;height: 100%;">
<div style="z-index: 999;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);font-size: 14px;margin-left: -2px;">
<div style="z-index: 999;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);font-size: 12px;margin-left: -2px;">
{{directive.izPreferential=='1'?'参与':'不参与'}}
</div>
</view>
@ -126,7 +131,8 @@
<!-- 服务指令列表编辑页 -->
<a-drawer v-model:open="directiveEditDrawer" title="选择服务指令" width="70vw" :closable="false"
:footer-style="{ textAlign: 'right' }" :body-style="{ padding: 0 }">
<ConfigServiceDirectiveList ref="configServiceDirectiveListRef" :directiveList="seletedRecord.directives"
<ConfigServiceDirectiveList ref="configServiceDirectiveListRef"
:directiveList="seletedRecord.directives"
@deleteDirective="deleteDirective" @addDirective="addDirective">
</ConfigServiceDirectiveList>
<template #footer>
@ -201,6 +207,14 @@ function handleEmotionTags(prefix, directive_, suffix) {
}
}
function getImgPath(pathUrl){
if(pathUrl && pathUrl.length>0){
return getFileAccessHttpUrl(pathUrl);
}else{
return '/src/assets/images/logo.png';
}
}
/**
* 新增
*/
@ -220,6 +234,7 @@ function add() {
* @param record
*/
function edit(record) {
console.log("🚀 ~ edit ~ record:", record)
selectedDirective.value = ''
derectiveInfo.value = {}
seletedRecord.value = record
@ -257,6 +272,9 @@ function handleCancel() {
*/
const handleAddDirectives = () => {
directiveEditDrawer.value = true;
nextTick(() => {
configServiceDirectiveListRef.value.edit(seletedRecord.value);
});
};
/**
@ -298,6 +316,7 @@ function deleteDirective(directiveId) {
* @param directive_
*/
function addDirective(directive_) {
console.log("🚀 ~ addDirective ~ directive_:", directive_)
let res_ = seletedRecord.value.directives.filter(item => item.id == directive_.id)
if (res_.length > 0) {
createMessage.warning('服务指令已选择');
@ -305,6 +324,7 @@ function addDirective(directive_) {
createMessage.success('选择成功');
seletedRecord.value.directives.push(directive_)
}
console.log('seletedRecord.value--->',seletedRecord.value);
}
/**
@ -353,7 +373,9 @@ defineExpose({
</style>
<style lang="less" scoped>
.selected {
// border: 1px solid #1890ff;
border: 1px solid #59bffe;
border-radius: 8px;
// padding: 0px
}
.directiveInfoClass {
@ -386,7 +408,7 @@ defineExpose({
border-radius: 8px;
height: 320px;
box-shadow:
0 0 0 2px #d3d3d3, /* 描边 */
0 0 0 1px #59bffe, /* 描边 */
0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
transform: translate(-2px , -2px); /* 轻微上浮效果 */
}
@ -461,4 +483,12 @@ defineExpose({
margin-right:10px;background-color: #e3e6e8; border-radius: 50%; padding: 0px 5px 5px 5px;
cursor: pointer;
}
.ellipsis-two-lines {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1; /* 限制文本为2行 */
overflow: hidden;
text-overflow: ellipsis;
}
</style>