|
@@ -0,0 +1,172 @@
|
|
|
+<template>
|
|
|
+ <div class="admin-client">
|
|
|
+ <el-form :inline="true">
|
|
|
+ <el-form-item label="用户名">
|
|
|
+ <el-input v-model="queryParams.name" size="small" placeholder="请输入用户名"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="" size="small" @click="getList">查询</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="handleAdd()">新增</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-table v-loading="loading" :data="tableData" border header-row-class-name="custom-table-header">
|
|
|
+ <el-table-column type="index" label="#" width="55" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="name" label="客户名称" align="center" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="personnelName" label="客户对接人" align="center" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" width="150">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-dropdown split-button type="primary" size="small" @click="handleEdit(scope.row)">
|
|
|
+ <p>编辑</p>
|
|
|
+ <el-dropdown-menu slot="dropdown" class="text-align_center">
|
|
|
+ <el-dropdown-item class="color-red" @click.native="handleDelete(scope.row)" divided>删除</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="pagination">
|
|
|
+ <el-pagination :current-page.sync="queryParams.current" :page-size="queryParams.size" :total="total" @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" background></el-pagination>
|
|
|
+ </div>
|
|
|
+ <el-dialog :title="title" :visible.sync="visible" width="500px" :before-close="close" append-to-body>
|
|
|
+ <el-form v-if="visible" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" label-position="left">
|
|
|
+ <el-form-item label="客户名称" prop="name">
|
|
|
+ <el-input v-model="ruleForm.name" placeholder="请输入客户名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="对接人" prop="person">
|
|
|
+ <el-select style="width:100%" v-model="ruleForm.personnelId" filterable placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in personnelList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
+ <el-input v-model="ruleForm.remark" placeholder="请输入备注" type="textarea"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="close">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ visible: false,
|
|
|
+ loading: false,
|
|
|
+ btnLoading: false,
|
|
|
+ personnelList:[],
|
|
|
+ total: 0,
|
|
|
+ tableData: [],
|
|
|
+ title: '',
|
|
|
+ queryParams: {
|
|
|
+ size: 10,
|
|
|
+ current: 1,
|
|
|
+ name: ''
|
|
|
+ },
|
|
|
+ ruleForm: {},
|
|
|
+ rules: {
|
|
|
+ name: [{ required: true, message: '请输入客户名称', trigger: 'blur' },],
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getList()
|
|
|
+ this.getPersonnelList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleAdd() {
|
|
|
+ this.title = '新增客户'
|
|
|
+ this.visible = true
|
|
|
+ this.ruleForm = {}
|
|
|
+ },
|
|
|
+ handleEdit(row) {
|
|
|
+ this.title = '编辑客户'
|
|
|
+ this.visible = true
|
|
|
+ this.ruleForm = { ...row }
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.visible = false
|
|
|
+ },
|
|
|
+ getPersonnelList(){
|
|
|
+ this.$api.getPermissionPersonnelList().then((response)=>{
|
|
|
+ this.personnelList=response.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getList() {
|
|
|
+ this.loading = true
|
|
|
+ this.$api.getAdminClientList(this.queryParams).then(response => {
|
|
|
+ this.tableData = response.data.records
|
|
|
+ this.total = response.data.total
|
|
|
+ this.loading = false
|
|
|
+ }).catch(error => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.queryParams.current = val;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ this.$refs.ruleForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.btnLoading = true
|
|
|
+ if (this.ruleForm.id) {
|
|
|
+ this.$api.editAdminClient(this.ruleForm).then(response => {
|
|
|
+ this.$message.success('编辑成功')
|
|
|
+ this.btnLoading = false
|
|
|
+ this.getList()
|
|
|
+ this.close()
|
|
|
+ }).catch(error => {
|
|
|
+ this.btnLoading = false
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$api.addAdminClient(this.ruleForm).then(response => {
|
|
|
+ this.$message.success('新增成功')
|
|
|
+ this.btnLoading = false
|
|
|
+ this.getList()
|
|
|
+ this.close()
|
|
|
+ }).catch(error => {
|
|
|
+ this.btnLoading = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleDelete(row) {
|
|
|
+ this.$confirm('确认删除本条数据吗?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.loading = true
|
|
|
+ this.$api.deleteAdminClient({ id: row.id }).then(response => {
|
|
|
+ this.$message.success('删除成功')
|
|
|
+ this.loading = false
|
|
|
+ this.getList()
|
|
|
+ }).catch(error => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .admin-client {
|
|
|
+
|
|
|
+ }
|
|
|
+ </style>
|