修改服务指令包页面样式

src/views/services/directivePackage/DirectivePackageList.vue

@@ -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); /* 轻微上浮效果 */
 }

src/views/services/directivePackage/components/ConfigServiceDirective.data.ts

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

src/views/services/directivePackage/components/ConfigServiceDirectiveList.vue

@@ -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'">
+        <span v-if="column.dataIndex === 'instructionTagName'">
-          {{ filterDictTextByCache('instruction_tag', text) }}
+          {{ 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>
 

src/views/services/directivePackage/components/DirectivePackageForm.vue

@@ -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)
+    var directivesList = model.directives;
-    .then((res) => {
+    if(directivesList.length == 0){
-      if (res.success) {
+      createMessage.warning('请选择服务指令');
-        createMessage.success(res.message);
-        emit('ok');
-      } else {
-        createMessage.warning(res.message);
-      }
-    })
-    .finally(() => {
       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;
+      });
 }
 
 

src/views/services/directivePackage/components/DirectivePackageModal.vue

@@ -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 }">
+      <a-col :span="6" v-for="directive of seletedRecord.directives" :key="directive.id" style="padding: 5px;"  @click="directiveInfo(directive)" >
-        <div class="directiveClass">
+        <div class="directiveClass" :class="{ 'selected': selectedDirective === directive.id }">
           <div class="fenleiClass">
             <a-row>
-              <a-col :span="12">
+              <a-col :span="12" class="ellipsis-two-lines">
-                {{directive.instructionTagName}}
+                {{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">
+            <a-col :span="14">
-              <span  style="margin-left:10px;font-size:20px;">{{ directive.directiveName }}</span>
+              <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;">
+            <a-col :span="10" style="text-align: right;">
-              <span class="yuanClass" v-if="directive.serviceContent">
+              <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">
+                    <audio controls disabled="false"  v-if="directive.mp3File">
-                      <source :src="getFileAccessHttpUrl(derectiveInfo.mp3FileMedia)">
+                      <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>
+                    <video controls  v-if="directive.mp4File">
-                      <source :src="getFileAccessHttpUrl(derectiveInfo.mp4FileMedia)">
+                      <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>