客服页面

src/views/personnel/wechatService.vue

@@ -29,6 +29,9 @@
           <el-button type="primary" link @click="ServiceDel(scope.operationData)"> 删除
           </el-button>
         </template>
+         <template v-slot:search="scope">
+          {{ scope.slotData.label }}
+        </template>
       </ComplexTable>
     </PageMain>
     <el-dialog v-model="ServiceAddShow" title="添加客服账号" width="30%">
@@ -37,14 +40,16 @@
         <el-form-item label="客户昵称" prop="name">
           <el-input v-model="ServiceForm.name" />
         </el-form-item>
-        <el-form-item label="客户头像" >
-          <el-upload class="avatar-uploader " action="#"
-            :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
-            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
-            <el-icon v-else class="avatar-uploader-icon">
-              <Plus />
-            </el-icon>
-          </el-upload>
+        <el-form-item label="客户头像" class="avatar">
+          <div class="flex f-c">
+            <el-upload class="avatar-uploader" action="#" :show-file-list="false" :on-change="beforeAvatarUpload">
+              <img v-if="imageUrl" :src="imageUrl" />
+              <el-icon v-else class="avatar-uploader-icon">
+                <Plus />
+              </el-icon>
+            </el-upload>
+            <span>支持png，jpg，jpeg的照片，大小不超过5MB</span>
+          </div>
         </el-form-item>
         <el-form-item label="关联员工账号 （该账号为员工在掌柜体系内注册的账号）" prop="name">
           <el-select v-model="ServiceForm.region" placeholder="请输入姓名查找">
@@ -61,9 +66,9 @@
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button @click="ServiceAddShow = false">Cancel</el-button>
+          <el-button @click="ServiceAddShow = false">取消</el-button>
           <el-button type="primary" @click="ServiceAddShow = false">
-            Confirm
+            确定
           </el-button>
         </div>
       </template>
@@ -74,7 +79,7 @@
 <script lang="ts" setup>
 import api from '@/api';
 import { ElMessage } from 'element-plus'
-import type { FormInstance, FormRules,UploadProps,  } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
 import { ref, reactive } from 'vue'
 interface PageInfo {
@@ -85,71 +90,46 @@ interface PageInfo {
 }
 interface ServiceForm {
   name: string
-  region: string
-  count: string
-  date1: string
-  date2: string
-  delivery: boolean
-  location: string
-  type: string[]
-  resource: string
-  desc: string
+
 }
 
 const ServiceFormRef = ref<FormInstance>()
 const ServiceForm = reactive<ServiceForm>({
   name: 'Hello',
-  region: '',
-  count: '',
-  date1: '',
-  date2: '',
-  delivery: false,
-  location: '',
-  type: [],
-  resource: '',
-  desc: '',
+
 })
 const ServiceRules = reactive<FormRules<ServiceForm>>({
   name: [
     { required: true, message: 'Please input Activity name', trigger: 'blur' },
     { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
   ],
-  region: [
-    {
-      required: true,
-      message: 'Please select Activity zone',
-      trigger: 'change',
-    },
-  ],
+
 })
 /**
  *   选择头像
  * @param response
  * @param uploadFile
  */
- const imageUrl = ref('')
-const handleAvatarSuccess: UploadProps['onSuccess'] = (
-  response,
-  uploadFile
-) => {
-  console.log()
-  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
-}
-
-const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
-  console.log(rawFile)
-  if (rawFile.type !== 'image/jpeg') {
-    ElMessage.error('Avatar picture must be JPG format!')
+const imageUrl = ref('')//图片回显
+//图片上传事件
+const beforeAvatarUpload = (file: any) => {
+  if (file.raw.type !== 'image/jpeg') {
+    ElMessage.error('只读取，png，jeg格式的图片')
     return false
-  } else if (rawFile.size / 1024 / 1024 > 2) {
-    ElMessage.error('Avatar picture size can not exceed 2MB!')
+  } else if (file.raw.size / 1024 / 1024 > 2) {
+    ElMessage.error('请上传小于2MB的图片')
     return false
   }
-  return true
 }
-//
-const ServiceAddShow = ref(false)
+const ServiceAddShow = ref(false)//添加客服弹窗
+
+//表格数据
 const tableData = ref([
+  {
+    companyName:"1",
+    companyCode:"3213",
+    type:"3123",
+  }
 ]);
 //分页
 const pageInfo = ref({
@@ -166,14 +146,16 @@ onMounted(() => {
   findpage();
 
 });
+//分页查询方法
 function findpage() {
 }
+//表格字段
 const columns = [
   { prop: "companyName", label: "客服头像", align: 'left', width: '150' },
   { prop: "companyCode", label: "客服昵称", width: '200' },
-  { prop: "type", label: "接待人员", width: '200' },
-  { prop: "type", label: "员工账号", width: '200' },
-  { prop: "type", label: "添加时间", width: '200' },
+  { prop: "type1", label: "接待人员", width: '200' },
+  { prop: "type2", label: "员工账号", width: '200' },
+  { prop: "type3", label: "添加时间", width: '200' },
   { prop: "type", label: "节假日排班", },
 ];
 //分页事件
@@ -195,31 +177,29 @@ function ServiceDel(item: any) {
 
 </script>
 <style lang="scss" scoped>
-.avatar-uploader .el-upload {
+.avatar-uploader :deep(.el-upload) {
   border: 1px dashed #eee;
   border-radius: 6px;
+  width: 150px;
+  height: 150px;
   cursor: pointer;
   position: relative;
   overflow: hidden;
   transition: var(--el-transition-duration-fast);
 }
 
-.avatar-uploader .el-upload:hover {
-  border-color: var(--el-color-primary);
+.avatar span {
+  color: #999;
+  font-size: 12px;
+}
+
+.avatar-uploader img {
+  width: 100%;
+  height: 100%;
 }
 
 .el-icon.avatar-uploader-icon {
   font-size: 28px;
   color: #8c939d;
-  width: 178px;
-  height: 178px;
-  text-align: center;
-}
-.avatar-uploader .avatar {
-  width: 150px;
-  height: 150px;
-  display: block;
-  border-radius:10px;
-
 }
 </style>