|
|
@@ -0,0 +1,323 @@
|
|
|
+<template>
|
|
|
+ <div class="full-container-p24">
|
|
|
+ <div style="display: flex; justify-content: space-between">
|
|
|
+ <div style="display: flex">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入姓名/手机号"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ v-model="term"
|
|
|
+ clearable
|
|
|
+ style="height: 32px; width: 330px; line-height: 32px"
|
|
|
+ @keyup.enter.native="getClientList"
|
|
|
+ ></el-input>
|
|
|
+ <div class="seach-btn" @click="getClientList">查询</div>
|
|
|
+ </div>
|
|
|
+ <el-button v-auth="'CLIENTACCOUNT'" type="primary" @click="showAddModal"
|
|
|
+ >添加客户</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ v-model="visable"
|
|
|
+ :title="accountId ? '修改客户' : '添加客户'"
|
|
|
+ width="550px"
|
|
|
+ @close="resetForm()"
|
|
|
+ >
|
|
|
+ <template v-slot:default>
|
|
|
+ <div class="df jcc">
|
|
|
+ <el-form
|
|
|
+ :model="ruleForm"
|
|
|
+ :rules="rules"
|
|
|
+ ref="form"
|
|
|
+ label-width="110px"
|
|
|
+ label-position="left"
|
|
|
+ >
|
|
|
+ <el-form-item prop="name" label="姓名">
|
|
|
+ <el-input style="width: 280px" v-model="ruleForm.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="phone" label="手机号">
|
|
|
+ <el-input
|
|
|
+ style="width: 280px"
|
|
|
+ v-model="ruleForm.phone"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item prop="sharePermission" label="查看分享">
|
|
|
+ <el-radio
|
|
|
+ v-model="ruleForm.sharePermission"
|
|
|
+ :label="1"
|
|
|
+ size="large"
|
|
|
+ >有权限</el-radio
|
|
|
+ >
|
|
|
+ <el-radio
|
|
|
+ v-model="ruleForm.sharePermission"
|
|
|
+ :label="0"
|
|
|
+ size="large"
|
|
|
+ >无权限</el-radio
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-slot:footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="resetForm">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="addClient(ruleForm)">
|
|
|
+ 确 定
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <div style="margin-top: 24px">
|
|
|
+ <el-table :data="tableData" stripe style="width: 100%">
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ min-width="40"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="userName"
|
|
|
+ label="姓名"
|
|
|
+ min-width="80"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="phone"
|
|
|
+ label="手机号"
|
|
|
+ min-width="100"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="accountStatus"
|
|
|
+ label="状态"
|
|
|
+ min-width="80"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template v-slot="scope">
|
|
|
+ <el-switch
|
|
|
+ v-model="scope.row.accountStatus"
|
|
|
+ active-color="#13ce66"
|
|
|
+ inactive-color="#ff4949"
|
|
|
+ active-text="启用"
|
|
|
+ inactive-text="禁用"
|
|
|
+ :active-value="1"
|
|
|
+ :inactive-value="0"
|
|
|
+ /> </template
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="sharePermission"
|
|
|
+ label="分享权限"
|
|
|
+ min-width="80"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template v-slot="scope">
|
|
|
+ <el-switch
|
|
|
+ v-model="scope.row.sharePermission"
|
|
|
+ active-color="#13ce66"
|
|
|
+ inactive-color="#ff4949"
|
|
|
+ active-text="启用"
|
|
|
+ inactive-text="禁用"
|
|
|
+ :active-value="1"
|
|
|
+ :inactive-value="0"
|
|
|
+ /> </template
|
|
|
+ ></el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ v-auth="'ADDACCOUNT'"
|
|
|
+ label="操作"
|
|
|
+ min-width="120"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template v-slot="scope">
|
|
|
+ <div class="df aic jcsa">
|
|
|
+ <!-- <el-switch
|
|
|
+ v-model="scope.row.accountStatus"
|
|
|
+ active-color="#13ce66"
|
|
|
+ inactive-color="#ff4949"
|
|
|
+ active-text="启用"
|
|
|
+ inactive-text="禁用"
|
|
|
+ :active-value="1"
|
|
|
+ :inactive-value="0"
|
|
|
+ />
|
|
|
+
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ color: red;
|
|
|
+ margin-left: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ text-decoration: underline;
|
|
|
+ cursor: pointer;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </div> -->
|
|
|
+ <el-button
|
|
|
+ @click="showUpdateModal(scope.row, 1)"
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ >修改客户权限</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div style="width: 100%; text-align: right; margin-top: 43px">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="total"
|
|
|
+ @current-change="pageChange"
|
|
|
+ ></el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import api from "../../apis/fetch";
|
|
|
+import { ref, onMounted, reactive } from "vue";
|
|
|
+import { ElNotification, ElMessageBox } from "element-plus";
|
|
|
+import store from "../../store/index";
|
|
|
+
|
|
|
+let tableData = ref([]);
|
|
|
+let currentPage = ref(1);
|
|
|
+let total = ref(0);
|
|
|
+let term = ref("");
|
|
|
+let loginAccountId = ref(0);
|
|
|
+let accountId = ref("");
|
|
|
+let ruleForm = ref({
|
|
|
+ name: "",
|
|
|
+ phone: "",
|
|
|
+ roleId: "",
|
|
|
+ deptId: "",
|
|
|
+});
|
|
|
+const rules = reactive({
|
|
|
+ name: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请填写姓名",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ phone: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请填写手机号",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ sharePermission: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请选择权限",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+});
|
|
|
+
|
|
|
+function showAddModal() {
|
|
|
+ visable.value = true;
|
|
|
+ ruleForm.value = {
|
|
|
+ name: "",
|
|
|
+ phone: "",
|
|
|
+ sharePermission: "",
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+async function getClientList() {
|
|
|
+ let res = await api.getClientList({
|
|
|
+ term: term.value,
|
|
|
+ currentPage: currentPage.value,
|
|
|
+ size: 10,
|
|
|
+ loginAccountId: loginAccountId.value,
|
|
|
+ });
|
|
|
+ if (res.data.status == 0) {
|
|
|
+ tableData.value = res.data.result;
|
|
|
+ total.value = res.data.total;
|
|
|
+ } else {
|
|
|
+ tableData.value = [];
|
|
|
+ total.value = 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function pageChange(e) {
|
|
|
+ currentPage.value = e;
|
|
|
+ getClientList();
|
|
|
+}
|
|
|
+let visable = ref(false);
|
|
|
+let form = ref(null);
|
|
|
+async function addClient() {
|
|
|
+ form.value.validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ let postData = {
|
|
|
+ ...ruleForm.value,
|
|
|
+ loginAccountId: loginAccountId.value,
|
|
|
+ };
|
|
|
+ if (accountId.value) {
|
|
|
+ postData.accountId = accountId.value;
|
|
|
+ }
|
|
|
+ let res = await api[accountId.value ? "updateClient" : "addClient"](
|
|
|
+ postData
|
|
|
+ );
|
|
|
+ if (res.data.status == 0) {
|
|
|
+ ElNotification({
|
|
|
+ title: "成功",
|
|
|
+ duration: 1500,
|
|
|
+ message: res.data.msg,
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ resetForm();
|
|
|
+ getClientList();
|
|
|
+ } else {
|
|
|
+ ElNotification({
|
|
|
+ title: "失败",
|
|
|
+ duration: 1500,
|
|
|
+ message: res.data.msg,
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+function resetForm() {
|
|
|
+ visable.value = false;
|
|
|
+ accountId.value = "";
|
|
|
+ form.value.resetFields();
|
|
|
+}
|
|
|
+
|
|
|
+function showUpdateModal(item, type) {
|
|
|
+ visable.value = true;
|
|
|
+ accountId.value = item.id;
|
|
|
+ console.log(item);
|
|
|
+ ruleForm.value = {
|
|
|
+ name: item.userName,
|
|
|
+ phone: item.phone,
|
|
|
+ sharePermission: item.sharePermission,
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ loginAccountId.value = localStorage.loginAccountId;
|
|
|
+ getClientList();
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.seach-btn {
|
|
|
+ display: inline-block;
|
|
|
+ width: 60px;
|
|
|
+ height: 38px;
|
|
|
+ background: #0094fe;
|
|
|
+ border-radius: 2px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 38px;
|
|
|
+ margin-left: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+</style>
|
wzh