客服页面

src/router/modules/personnel.ts

@@ -69,6 +69,14 @@ const routes: RouteRecordRaw = {
         // auth:['role.add','role.view','role.delete','role.edit']
       },
     },
+    {
+      path: 'wechatService',
+      name: 'personnelWechatService',
+      component: () => import('@/views/personnel/wechatService.vue'),
+      meta: {
+        title: '微信客服',
+      },
+    },
   ],
 }
 

src/views/personnel/wechatService.vue

@@ -0,0 +1,225 @@
+<template>
+  <div>
+    <PageMain class="vh100">
+      <ElForm :inline="false" :model="formInline" class="demo-form-inline" label-width="100px">
+        <ElRow :gutter="20">
+          <ElCol :md="6">
+            <ElFormItem label="客服昵称">
+              <el-input v-model="formInline.companyName" placeholder="输入客服昵称查找" clearable class="el-inputs" />
+            </ElFormItem>
+          </ElCol>
+          <ElCol :md="4">
+            <el-button type="primary" @click="findpage">
+              <template #icon>
+                <SvgIcon name="i-ep:search" />
+              </template>
+              查询</el-button>
+          </ElCol>
+        </ElRow>
+      </ElForm>
+      <ElDivider border-style="dashed"></ElDivider>
+      <ComplexTable :tableData="tableData" :columns="columns" :showIndex="false" :columnwidth="200" :showSelect="true"
+        :pageInfo="pageInfo" @getList="getList">
+        <template v-slot:table-title-btn>
+          <el-button type="primary" @click="ServiceAddShow = true">添加客服账号</el-button>
+        </template>
+        <template v-slot:operation="scope">
+          <el-button type="primary" link @click="ServiceUpdate(scope.operationData)"> 编辑
+          </el-button>
+          <el-button type="primary" link @click="ServiceDel(scope.operationData)"> 删除
+          </el-button>
+        </template>
+      </ComplexTable>
+    </PageMain>
+    <el-dialog v-model="ServiceAddShow" title="添加客服账号" width="30%">
+      <el-form ref="ServiceFormRef" style="max-width: 600px" :model="ServiceForm" :rules="ServiceRules"
+        label-width="auto" label-position="top">
+        <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>
+        <el-form-item label="关联员工账号 （该账号为员工在掌柜体系内注册的账号）" prop="name">
+          <el-select v-model="ServiceForm.region" placeholder="请输入姓名查找">
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="接待人员（该人员为企业微信生态内的员工）" prop="name">
+          <el-select v-model="ServiceForm.region" placeholder="请输入姓名查找">
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="ServiceAddShow = false">Cancel</el-button>
+          <el-button type="primary" @click="ServiceAddShow = false">
+            Confirm
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import api from '@/api';
+import { ElMessage } from 'element-plus'
+import type { FormInstance, FormRules,UploadProps,  } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import { ref, reactive } from 'vue'
+interface PageInfo {
+  pageNum: number;
+  pageSize: number;
+  sizes: number[];
+  total: number;
+}
+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!')
+    return false
+  } else if (rawFile.size / 1024 / 1024 > 2) {
+    ElMessage.error('Avatar picture size can not exceed 2MB!')
+    return false
+  }
+  return true
+}
+//
+const ServiceAddShow = ref(false)
+const tableData = ref([
+]);
+//分页
+const pageInfo = ref({
+  pageNum: 1,
+  pageSize: 20,
+  sizes: [10, 20, 30, 40, 50],
+  total: 0,
+});
+//检索条件
+const formInline = reactive({
+  companyName: '',//保险公司name
+})
+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: "type", label: "节假日排班", },
+];
+//分页事件
+function getList(item: PageInfo) {
+  pageInfo.value.pageNum = item.pageNum;
+  pageInfo.value.pageSize = item.pageSize;
+  findpage();
+};
+
+//编辑客服
+function ServiceUpdate(item: any) {
+
+}
+//删除客服
+function ServiceDel(item: any) {
+
+}
+
+
+</script>
+<style lang="scss" scoped>
+.avatar-uploader .el-upload {
+  border: 1px dashed #eee;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.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>