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

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

@@ -1,215 +1,227 @@
 <template>
-<div>
-	<a-row>
-		<a-col :span="rowA">
-			<div>
-				<!--引用表格-->
-				<BasicTable @register="registerTable" >
-					<!--插槽:table标题-->
-					<template #tableTitle>
-            <div class="title1Class">可选指令标签</div>
-					</template>
-					<!--操作栏-->
-					<template #action="{ record }">
-						<TableAction :actions="getTableAction(record)" />
-					</template>
-					<!--字段回显插槽-->
-					<template v-slot:bodyCell="{ column, record, index, text }">
-					</template>
-				</BasicTable>
-			</div>
-			<div style="padding: 8px;">
-        <div class="title1Class">已选指令标签</div>
-				<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>
-              <a-divider type="vertical" />
-							<a @click="handleEmlDetail(record)">详情</a>
-						</template>
-					</template>
-				</a-table>
-			</div>
-		</a-col>
-		<a-col :span="rowB" style="padding: 8px;">
-			<div style="border: 1px solid rgb(243, 239, 239);padding: 8px;">
-			详情
-      <a-list item-layout="horizontal" :data-source="tagsDetailData" >
-        <template #renderItem="{ item ,index}">
-          <a-list-item>
-            <a-list-item-meta :description="item.serviceContent">
-              <template #title>
-                {{ (index+1) +'、 '+ item.categoryName +'-'+item.typeName +'-'+item.directiveName }}
-                <span v-if="item.tagsName">({{item.tagsName}})</span>
+  <div>
+    <a-row>
+      <a-col :span="rowA">
+        <div style="border-radius: 14px;">
+          <!--引用表格-->
+          <BasicTable @register="registerTable">
+            <!--插槽:table标题-->
+            <template #tableTitle>
+              <div class="title1Class">可选指令标签</div>
+            </template>
+            <!--操作栏-->
+            <template #action="{ record }">
+              <TableAction :actions="getTableAction(record)" />
+            </template>
+            <!--字段回显插槽-->
+            <template v-slot:bodyCell="{ column, record, index, text }">
+            </template>
+          </BasicTable>
+        </div>
+        <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">
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'action'">
+                <a @click="handleYichu(record)">移除</a>
+                <a-divider type="vertical" />
+                <a @click="handleEmlDetail(record)">详情</a>
               </template>
-            </a-list-item-meta>
-          </a-list-item>
-        </template>
-      </a-list>
-			</div>
-		</a-col>
-	</a-row>
-</div>
+            </template>
+          </a-table>
+        </div>
+      </a-col>
+      <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">
+            <template #renderItem="{ item, index }">
+              <a-list-item>
+                <a-list-item-meta :description="item.serviceContent">
+                  <template #title>
+                    {{ (index + 1) + '、 ' + item.categoryName + '-' + item.typeName + '-' + item.directiveName }}
+                    <span v-if="item.tagsName">({{ item.tagsName }})</span>
+                  </template>
+                </a-list-item-meta>
+              </a-list-item>
+            </template>
+          </a-list>
+        </div>
+      </a-col>
+    </a-row>
+  </div>
 
 </template>
 
 <script lang="ts" name="bizEmployeesInfo-nuBizEmployeesServcieTags" setup>
-  import {ref, reactive, computed, unref} from 'vue';
-  import {BasicTable, useTable, TableAction} from '/@/components/Table';
-  import {useModal} from '/@/components/Modal';
-  import { useListPage } from '/@/hooks/system/useListPage'
-  import { serviceTagcolumns ,employeesTagcolumns } from '../BizEmployeesInfo.data';
-  import { getEmployeesList,queryTagsById,checkTags,removeTags,getEmployeesServiceTags  } from '../BizEmployeesInfo.api';
-  import { downloadFile } from '/@/utils/common/renderUtils';
-  import { useUserStore } from '/@/store/modules/user';
+import { ref, reactive, computed, unref } from 'vue';
+import { BasicTable, useTable, TableAction } from '/@/components/Table';
+import { useModal } from '/@/components/Modal';
+import { useListPage } from '/@/hooks/system/useListPage'
+import { serviceTagcolumns, employeesTagcolumns } from '../BizEmployeesInfo.data';
+import { getEmployeesList, queryTagsById, checkTags, removeTags, getEmployeesServiceTags } from '../BizEmployeesInfo.api';
+import { downloadFile } from '/@/utils/common/renderUtils';
+import { useUserStore } from '/@/store/modules/user';
 import { number } from 'vue-types';
 import { defHttp } from '/@/utils/http/axios';
-  const queryParam = reactive<any>({});
-  const checkedKeys = ref<Array<string | number>>([]);
-  const userStore = useUserStore();
+const queryParam = reactive<any>({});
+const checkedKeys = ref<Array<string | number>>([]);
+const userStore = useUserStore();
 
-  const rowA = ref<number>(24);
-  const rowB = ref<number>(0);
-  const employeesDataSource = ref<any[]>([]);
-  const tagsDetailData = ref<any[]>([]);
-  const employeesInfo = reactive<any>({});
-  const emit = defineEmits(['register', 'ok']);
-  //注册model
-  const [registerModal, {openModal}] = useModal();
-  //注册table数据
-  const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
-      tableProps:{
-           title: '员工配置的指令标签',
-           api: getEmployeesList,
-           columns: serviceTagcolumns,
-           canResize:false,
-		   immediate: false,
-		   showIndexColumn: true,
-           formConfig: {
-              //labelWidth: 120,
-              autoSubmitOnEnter:true,
-              showAdvancedButton:true,
-              fieldMapToNumber: [
-              ],
-              fieldMapToTime: [
-              ],
-            },
-           actionColumn: {
-               width: 120,
-               fixed:'right'
-            },
-            beforeFetch: (params) => {
-              return Object.assign(params, queryParam);
-            },
-      },
+const rowA = ref<number>(24);
+const rowB = ref<number>(0);
+const employeesDataSource = ref<any[]>([]);
+const tagsDetailData = ref<any[]>([]);
+const employeesInfo = reactive<any>({});
+const emit = defineEmits(['register', 'ok']);
+//注册model
+const [registerModal, { openModal }] = useModal();
+//注册table数据
+const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+  tableProps: {
+    title: '员工配置的指令标签',
+    api: getEmployeesList,
+    columns: serviceTagcolumns,
+    canResize: false,
+    immediate: false,
+    showIndexColumn: true,
+    formConfig: {
+      //labelWidth: 120,
+      autoSubmitOnEnter: true,
+      showAdvancedButton: true,
+      fieldMapToNumber: [
+      ],
+      fieldMapToTime: [
+      ],
+    },
+    actionColumn: {
+      width: 120,
+      fixed: 'right'
+    },
+    beforeFetch: (params) => {
+      return Object.assign(params, queryParam);
+    },
+  },
+})
+
+const [registerTable, { reload }] = tableContext
+/**
+* 选择
+ */
+async function handleXuanze(record) {
+  const model = { employeesId: employeesInfo.value.id, tagsId: record.id };
+  await checkTags(model).then((res) => {
+  })
+    .finally(() => {
+      reload();
+      getEmployeesServiceTagsList();
+    });
+}
+/**
+   * 移除
+   */
+async function handleYichu(record) {
+  const model = { id: record.id };
+  await removeTags(model).then((res) => {
+  })
+    .finally(() => {
+      reload();
+      getEmployeesServiceTagsList();
+    });
+
+}
+
+/**
+* 员工选择指令标签后的详情
+ */
+function handleEmlDetail(record) {
+  console.log(record);
+  rowA.value = 18;
+  rowB.value = 6;
+
+  queryTagsById({ id: record.employeesTagsId }).then(item => {
+    console.log(item);
+    tagsDetailData.value = item.directives;
+  })
+}
+/**
+   * 指令标签列表详情
+   */
+function handleDetail(record) {
+  rowA.value = 18;
+  rowB.value = 6;
+  console.log(record);
+
+  queryTagsById({ id: record.id }).then(item => {
+    console.log(item);
+    tagsDetailData.value = item.directives;
   })
 
-  const [registerTable, {reload}] = tableContext
-   /**
-	* 选择
-    */
-   async function handleXuanze(record) {
-      const model = {employeesId:employeesInfo.value.id,tagsId:record.id};
-      await checkTags(model).then((res) => {
-      })
-      .finally(() => {
-        reload();
-        getEmployeesServiceTagsList();
-      });
-   }
-   /**
-      * 移除
-      */
-   async function handleYichu(record) {
-      const model = {id:record.id};
-      await removeTags(model).then((res) => {
-      })
-      .finally(() => {
-        reload();
-        getEmployeesServiceTagsList();
-      });
-
-   }
-
-   /**
-	* 员工选择指令标签后的详情
-    */
-   function handleEmlDetail(record) {
-    console.log(record);
-    rowA.value = 18;
-    rowB.value = 6;
-
-    queryTagsById({ id: record.employeesTagsId }).then(item => {
-      console.log(item);
-      tagsDetailData.value = item.directives;
-    })
-   }
-   /**
-      * 指令标签列表详情
-      */
-   function handleDetail(record) {
-    rowA.value = 18;
-    rowB.value = 6;
-    console.log(record);
-
-    queryTagsById({ id: record.id }).then(item => {
-      console.log(item);
-      tagsDetailData.value = item.directives;
-    })
-
-   }
-   /**
-      * 操作栏
-      */
-  function getTableAction(record){
-       return [
-         {
-           label: '选择',
-           onClick: handleXuanze.bind(null, record),
-		       ifShow: record.employeesTagsId == '0'
-         },
-         {
-           label: '详情',
-           onClick: handleDetail.bind(null, record),
-         }
-       ]
-   }
+}
+/**
+   * 操作栏
+   */
+function getTableAction(record) {
+  return [
+    {
+      label: '选择',
+      onClick: handleXuanze.bind(null, record),
+      ifShow: record.employeesTagsId == '0'
+    },
+    {
+      label: '详情',
+      onClick: handleDetail.bind(null, record),
+    }
+  ]
+}
 
 //获取员工已获取的指令标签
-   function getEmployeesServiceTagsList(){
-      const model = {employeesId:employeesInfo.value.id};
-      getEmployeesServiceTags(model).then(item => {
-        employeesDataSource.value = item;
-      });
-   }
-
-   function init(record){
-      //初始化
-	  queryParam.employeesId = record.id;
-    employeesInfo.value= record;
-    rowA.value = 24;
-    rowB.value = 0;
-	  reload();
-    getEmployeesServiceTagsList();
-   }
-   function submitForm(){
-          emit('ok');
-   }
-
-
-
-  defineExpose({
-    init,
-    submitForm
+function getEmployeesServiceTagsList() {
+  const model = { employeesId: employeesInfo.value.id };
+  getEmployeesServiceTags(model).then(item => {
+    employeesDataSource.value = item;
   });
+}
+
+function init(record) {
+  //初始化
+  queryParam.employeesId = record.id;
+  employeesInfo.value = record;
+  rowA.value = 24;
+  rowB.value = 0;
+  reload();
+  getEmployeesServiceTagsList();
+}
+function submitForm() {
+  emit('ok');
+}
+
+
+
+defineExpose({
+  init,
+  submitForm
+});
 </script>
 
 <style lang="less" scoped>
-  :deep(.ant-picker),:deep(.ant-input-number){
-    width: 100%;
-  }
-  .title1Class{
-    // background-image: url(../../../../../public/resource/img/titleBackground1.jpg);
-    // width: 100px;
-  }
+: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,76 +2,65 @@
   <!-- <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>
-          <a href="javascript:void(0);" @click="handleQuoteDirectives">引用 </a>
-          <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>
-                    </a-popconfirm>
-                  </span>
-                  <div :class="{ 'selected': selectedDirective === directive.id }">
-                    <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.categoryName || derectiveInfo.categoryId_dictText }}
+      </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 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>
-              <source :src="opeMediaAddress + derectiveInfo.mp3FileMedia">
-            </audio>
+          <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 class="directiveInfoClass">视频文件：
-            <span v-if="!derectiveInfo.mp4FileMedia">暂无文件</span>
-            <video controls v-else>
-              <source :src="opeMediaAddress + derectiveInfo.mp4FileMedia">
-            </video>
+        </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>
-        </a-card>
+        </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>