员工标签详情、编辑页样式调整

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

@@ -259,11 +259,11 @@ export const employeesTagcolumns: BasicColumn[] = [
     key: 'rowIndex',
     width: 60,
     align: 'center',
-    customRender: function ({ text }) {
-      if (text == undefined) {
+    customRender: function ({ text, record, index, column }) {
+      if (index == undefined) {
         return '';
       } else {
-        return parseInt(text) + 1;
+        return parseInt(index) + 1;
       }
     },
   },

src/views/biz/bizEmployeesInfo/BizEmployeesInfoList.vue

@@ -356,7 +356,7 @@ onMounted(() => {
 }
 
 .titleOne {
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 600;
   height: 20px;
   line-height: 20px;

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

@@ -2,7 +2,7 @@
   <div>
     <a-row>
       <a-col :span="rowA">
-			<div>
+        <div style="border-radius: 14px;">
           <!--引用表格-->
           <BasicTable @register="registerTable">
             <!--插槽:table标题-->
@@ -18,9 +18,10 @@
             </template>
           </BasicTable>
         </div>
-			<div style="padding: 8px;">
+        <div style="padding: 14px;background-color: white;border-radius: 14px;">
           <div class="title1Class">已选指令标签</div>
-				<a-table :dataSource="employeesDataSource" :columns="employeesTagcolumns" style="margin-top:8px;" bordered size="small" :pagination="false">
+          <a-table :dataSource="employeesDataSource" :columns="employeesTagcolumns" style="margin-top:8px;" bordered
+            size="small" :pagination="false">
             <template #bodyCell="{ column, record }">
               <template v-if="column.key === 'action'">
                 <a @click="handleYichu(record)">移除</a>
@@ -31,7 +32,7 @@
           </a-table>
         </div>
       </a-col>
-		<a-col :span="rowB" style="padding: 8px;">
+      <a-col :span="rowB" style="padding-left: 14px;">
         <div style="border: 1px solid rgb(243, 239, 239);padding: 8px;">
           详情
           <a-list item-layout="horizontal" :data-source="tagsDetailData">
@@ -205,11 +206,22 @@ import { defHttp } from '/@/utils/http/axios';
 </script>
 
 <style lang="less" scoped>
-  :deep(.ant-picker),:deep(.ant-input-number){
+:deep(.ant-picker),
+:deep(.ant-input-number) {
   width: 100%;
 }
+
 .title1Class {
   // background-image: url(../../../../../public/resource/img/titleBackground1.jpg);
   // width: 100px;
+  font-weight: bold;
+}
+
+:deep .jeecg-basic-table-form-container {
+  padding: 0px;
+}
+
+:deep .jeecg-basic-table .ant-table-wrapper{
+  border-radius: 14px;
 }
 </style>

src/views/services/serviceTag/ServiceTagList.vue

@@ -195,7 +195,7 @@ onMounted(() => {
   background: linear-gradient(to bottom, #fff, #efe9e9);
 }
 .titleOne {
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 600;
   height: 40px;
   line-height: 40px;

src/views/services/serviceTag/components/ServiceTagForm.vue

@@ -6,9 +6,9 @@
           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></a-input>
+              <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-form-item>
             </a-col>
             <a-col :span="24">
@@ -21,7 +21,8 @@
             <a-col :span="24">
               <a-form-item label="备注" v-bind="validateInfos.description" id="DirectiveTagForm-description"
                 name="description">
-                <a-textarea v-model:value="formData.description" :rows="16" placeholder="请输入备注" />
+                <a-textarea v-model:value="formData.description" :rows="16" placeholder="请输入备注" :maxlength="200"
+                  :showCount="true" />
               </a-form-item>
             </a-col>
             <!-- <a-col :span="24">

src/views/services/serviceTag/components/ServiceTagModal.vue

@@ -2,63 +2,51 @@
   <!-- <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="1510px" :closable="false"
-    :footer-style="{ textAlign: 'right' }" @close="handleCancel">
+  <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>
-        <a-card title="指令标签详情" style="width: 25vw">
+        <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>
-        </a-card>
         </div>
-      <a-card title="服务指令" style="width: 25vw">
-        <template #extra>
+      </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>
-        </template>
-        <div class="scrollable-content">
-          <a-row>
-            <a-col :span="22" :push="1" v-for="directive of seletedRecord.directives" :key="directive.id"
-              style="margin-top: 15px;" @click="directiveInfo(directive)">
-              <a-badge-ribbon :text="filterDictTextByCache('period_type', directive.cycleType)"
-                :style="{ top: '-10px' }">
-                <a-card size="small">
-                  <span>
-                    <a-popconfirm title="是否确认移除？" ok-text="确认" cancel-text="取消"
-                      @confirm="deleteDirective(directive.id)">
-                      <a-button type="link" danger preIcon="ic:baseline-remove-circle"></a-button>
+            </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>
-                  </span>
-                  <div :class="{ 'selected': selectedDirective === directive.id }">
+            </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>
-                      {{ directive.directiveName }}
-                    </div>
-                    <!-- <div>
-                      体型标签：{{ handleBodyTags('', directive, '') }}
-                    </div>
-                    <div>
-                      情绪标签：{{ handleEmotionTags('', directive, '') }}
-                    </div> -->
-                  </div>
-                </a-card>
-              </a-badge-ribbon>
-            </a-col>
-          </a-row>
-        </div>
-      </a-card>
-      <div>
-        <a-card title="服务指令详情" style="width: 25vw">
-          <div class="">分类标签：{{ derectiveInfo.instructionName || derectiveInfo.instructionTagId_dictText }}</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">指令类型：{{ filterDictTextByCache('period_type', derectiveInfo.cycleType) }}</div> -->
             <div class="directiveInfoClass">服务时长(分钟)：{{ derectiveInfo.serviceDuration }}</div>
             <div class="directiveInfoClass">超时时长(分钟)：{{ derectiveInfo.timeoutDuration }}</div>
             <div class="directiveInfoClass">服务说明：{{ derectiveInfo.serviceContent }}</div>
-          <!-- <div class="directiveInfoClass">体型标签：{{ handleBodyTags('', derectiveInfo, '') }}</div>
-          <div class="directiveInfoClass">情绪标签：{{ handleEmotionTags('', derectiveInfo, '') }}</div> -->
             <div class="directiveInfoClass">语音文件：
               <span v-if="!derectiveInfo.mp3FileMedia">暂无文件</span>
               <audio controls disabled="false" v-else>
@@ -71,7 +59,8 @@
                 <source :src="opeMediaAddress + derectiveInfo.mp4FileMedia">
               </video>
             </div>
-        </a-card>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -311,7 +300,8 @@ defineExpose({
 }
 
 .directiveInfoClass {
-  margin-top: 10px;
+  margin-top: 14px;
+  color: #707070;
 }
 
 .scrollable-content {
@@ -322,4 +312,9 @@ defineExpose({
   padding-right: 8px;
   /* 防止滚动条遮挡内容 */
 }
+
+.hover-red-hand:hover {
+  color: red !important;
+  cursor: pointer;
+}
 </style>