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

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

@@ -259,11 +259,11 @@ export const employeesTagcolumns: BasicColumn[] = [
     key: 'rowIndex',
     width: 60,
     align: 'center',
-    customRender: function ({ text }) {
+    customRender: function ({ text, record, index, column }) {
-      if (text == undefined) {
+      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

@@ -1,10 +1,10 @@
 <template>
-<div>
+  <div>
     <a-row>
       <a-col :span="rowA">
-			<div>
+        <div style="border-radius: 14px;">
           <!--引用表格-->
-				<BasicTable @register="registerTable" >
+          <BasicTable @register="registerTable">
             <!--插槽:table标题-->
             <template #tableTitle>
               <div class="title1Class">可选指令标签</div>
@@ -18,11 +18,12 @@
             </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'" >
+              <template v-if="column.key === 'action'">
                 <a @click="handleYichu(record)">移除</a>
                 <a-divider type="vertical" />
                 <a @click="handleEmlDetail(record)">详情</a>
@@ -31,16 +32,16 @@
           </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" >
+          <a-list item-layout="horizontal" :data-source="tagsDetailData">
-        <template #renderItem="{ item ,index}">
+            <template #renderItem="{ item, index }">
               <a-list-item>
                 <a-list-item-meta :description="item.serviceContent">
                   <template #title>
-                {{ (index+1) +'、 '+ item.categoryName +'-'+item.typeName +'-'+item.directiveName }}
+                    {{ (index + 1) + '、 ' + item.categoryName + '-' + item.typeName + '-' + item.directiveName }}
-                <span v-if="item.tagsName">({{item.tagsName}})</span>
+                    <span v-if="item.tagsName">({{ item.tagsName }})</span>
                   </template>
                 </a-list-item-meta>
               </a-list-item>
@@ -49,46 +50,46 @@
         </div>
       </a-col>
     </a-row>
-</div>
+  </div>
 
 </template>
 
 <script lang="ts" name="bizEmployeesInfo-nuBizEmployeesServcieTags" setup>
-  import {ref, reactive, computed, unref} from 'vue';
+import { ref, reactive, computed, unref } from 'vue';
-  import {BasicTable, useTable, TableAction} from '/@/components/Table';
+import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import {useModal} from '/@/components/Modal';
+import { useModal } from '/@/components/Modal';
-  import { useListPage } from '/@/hooks/system/useListPage'
+import { useListPage } from '/@/hooks/system/useListPage'
-  import { serviceTagcolumns ,employeesTagcolumns } from '../BizEmployeesInfo.data';
+import { serviceTagcolumns, employeesTagcolumns } from '../BizEmployeesInfo.data';
-  import { getEmployeesList,queryTagsById,checkTags,removeTags,getEmployeesServiceTags  } from '../BizEmployeesInfo.api';
+import { getEmployeesList, queryTagsById, checkTags, removeTags, getEmployeesServiceTags } from '../BizEmployeesInfo.api';
-  import { downloadFile } from '/@/utils/common/renderUtils';
+import { downloadFile } from '/@/utils/common/renderUtils';
-  import { useUserStore } from '/@/store/modules/user';
+import { useUserStore } from '/@/store/modules/user';
 import { number } from 'vue-types';
 import { defHttp } from '/@/utils/http/axios';
-  const queryParam = reactive<any>({});
+const queryParam = reactive<any>({});
-  const checkedKeys = ref<Array<string | number>>([]);
+const checkedKeys = ref<Array<string | number>>([]);
-  const userStore = useUserStore();
+const userStore = useUserStore();
 
-  const rowA = ref<number>(24);
+const rowA = ref<number>(24);
-  const rowB = ref<number>(0);
+const rowB = ref<number>(0);
-  const employeesDataSource = ref<any[]>([]);
+const employeesDataSource = ref<any[]>([]);
-  const tagsDetailData = ref<any[]>([]);
+const tagsDetailData = ref<any[]>([]);
-  const employeesInfo = reactive<any>({});
+const employeesInfo = reactive<any>({});
-  const emit = defineEmits(['register', 'ok']);
+const emit = defineEmits(['register', 'ok']);
-  //注册model
+//注册model
-  const [registerModal, {openModal}] = useModal();
+const [registerModal, { openModal }] = useModal();
-  //注册table数据
+//注册table数据
-  const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
+const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
-      tableProps:{
+  tableProps: {
     title: '员工配置的指令标签',
     api: getEmployeesList,
     columns: serviceTagcolumns,
-           canResize:false,
+    canResize: false,
     immediate: false,
     showIndexColumn: true,
     formConfig: {
       //labelWidth: 120,
-              autoSubmitOnEnter:true,
+      autoSubmitOnEnter: true,
-              showAdvancedButton:true,
+      showAdvancedButton: true,
       fieldMapToNumber: [
       ],
       fieldMapToTime: [
@@ -96,32 +97,32 @@ import { defHttp } from '/@/utils/http/axios';
     },
     actionColumn: {
       width: 120,
-               fixed:'right'
+      fixed: 'right'
     },
     beforeFetch: (params) => {
       return Object.assign(params, queryParam);
     },
   },
-  })
+})
 
-  const [registerTable, {reload}] = tableContext
+const [registerTable, { reload }] = tableContext
-   /**
+/**
-	* 选择
+* 选择
  */
-   async function handleXuanze(record) {
+async function handleXuanze(record) {
-      const model = {employeesId:employeesInfo.value.id,tagsId:record.id};
+  const model = { employeesId: employeesInfo.value.id, tagsId: record.id };
   await checkTags(model).then((res) => {
   })
     .finally(() => {
       reload();
       getEmployeesServiceTagsList();
     });
-   }
+}
-   /**
+/**
    * 移除
    */
-   async function handleYichu(record) {
+async function handleYichu(record) {
-      const model = {id:record.id};
+  const model = { id: record.id };
   await removeTags(model).then((res) => {
   })
     .finally(() => {
@@ -129,12 +130,12 @@ import { defHttp } from '/@/utils/http/axios';
       getEmployeesServiceTagsList();
     });
 
-   }
+}
 
-   /**
+/**
-	* 员工选择指令标签后的详情
+* 员工选择指令标签后的详情
  */
-   function handleEmlDetail(record) {
+function handleEmlDetail(record) {
   console.log(record);
   rowA.value = 18;
   rowB.value = 6;
@@ -143,11 +144,11 @@ import { defHttp } from '/@/utils/http/axios';
     console.log(item);
     tagsDetailData.value = item.directives;
   })
-   }
+}
-   /**
+/**
    * 指令标签列表详情
    */
-   function handleDetail(record) {
+function handleDetail(record) {
   rowA.value = 18;
   rowB.value = 6;
   console.log(record);
@@ -157,11 +158,11 @@ import { defHttp } from '/@/utils/http/axios';
     tagsDetailData.value = item.directives;
   })
 
-   }
+}
-   /**
+/**
    * 操作栏
    */
-  function getTableAction(record){
+function getTableAction(record) {
   return [
     {
       label: '选择',
@@ -173,43 +174,54 @@ import { defHttp } from '/@/utils/http/axios';
       onClick: handleDetail.bind(null, record),
     }
   ]
-   }
+}
 
 //获取员工已获取的指令标签
-   function getEmployeesServiceTagsList(){
+function getEmployeesServiceTagsList() {
-      const model = {employeesId:employeesInfo.value.id};
+  const model = { employeesId: employeesInfo.value.id };
   getEmployeesServiceTags(model).then(item => {
     employeesDataSource.value = item;
   });
-   }
+}
 
-   function init(record){
+function init(record) {
   //初始化
   queryParam.employeesId = record.id;
-    employeesInfo.value= record;
+  employeesInfo.value = record;
   rowA.value = 24;
   rowB.value = 0;
   reload();
   getEmployeesServiceTagsList();
-   }
+}
-   function submitForm(){
+function submitForm() {
   emit('ok');
-   }
+}
 
 
 
-  defineExpose({
+defineExpose({
   init,
   submitForm
-  });
+});
 </script>
 
 <style lang="less" scoped>
-  :deep(.ant-picker),:deep(.ant-input-number){
+:deep(.ant-picker),
+:deep(.ant-input-number) {
   width: 100%;
-  }
+}
-  .title1Class{
+
+.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"
+              <a-form-item label="指令标签名称" v-bind="validateInfos.tagName" id="DirectiveTagForm-tagName" name="tagName">
-                name="tagName">
+                <a-input v-model:value="formData.tagName" placeholder="请输入指令标签名称" allow-clear :maxlength="16"
-                <a-input v-model:value="formData.tagName" placeholder="请输入指令标签名称" allow-clear></a-input>
+                  :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"
+  <a-drawer v-model:open="visible" v-if="visible" :title="title" width="1290px" :closable="false"
-    :footer-style="{ textAlign: 'right' }" @close="handleCancel">
+    :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">
+      </div>
-        <template #extra>
+      <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>
-        <div class="scrollable-content">
+          </div>
-          <a-row>
+          <div v-for="directive of seletedRecord.directives" :key="directive.id" @click="directiveInfo(directive)"
-            <a-col :span="22" :push="1" v-for="directive of seletedRecord.directives" :key="directive.id"
+            style="width: 100%;background-color: #f9f9f9;border-radius: 14px;margin-top: 14px;padding: 8px 14px;display: flex;justify-content: space-between;align-items: center;">
-              style="margin-top: 15px;" @click="directiveInfo(directive)">
+            <div> {{ directive.directiveName }}</div>
-              <a-badge-ribbon :text="filterDictTextByCache('period_type', directive.cycleType)"
+            <div>
-                :style="{ top: '-10px' }">
+              <a-popconfirm title="是否确认移除？" ok-text="确认" cancel-text="取消" @confirm="deleteDirective(directive.id)">
-                <a-card size="small">
+                <a-button class="hover-red-hand" type="link" style="color: grey;"
-                  <span>
+                  preIcon="ic:twotone-remove-circle-outline"></a-button>
-                    <a-popconfirm title="是否确认移除？" ok-text="确认" cancel-text="取消"
-                      @confirm="deleteDirective(directive.id)">
-                      <a-button type="link" danger preIcon="ic:baseline-remove-circle"></a-button>
               </a-popconfirm>
-                  </span>
+            </div>
-                  <div :class="{ 'selected': selectedDirective === directive.id }">
+          </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 class="directiveInfoClass">分类标签：{{ derectiveInfo.instructionName ||
-                    </div>
+              derectiveInfo.instructionTagId_dictText }}</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.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>