aircraft-admin/src/views/system/customer/index.vue

<template>
    <div class="app-container">
        <!--工具栏-->
        <div class="head-container">
            <div>
                <!-- 搜索 -->
                <el-input
                v-model="query.nickName"
                clearable
                size="small"
                placeholder="输入手机号"
                style="width: 200px;"
                class="filter-item"
                @keyup.enter.native="crud.toQuery"
                />
                <rrOperation />
                <el-button v-permission="permission.add" class="filter-item" size="mini" type="primary"
                    icon="el-icon-plus" @click="crud.toAdd">
                    添加{{ crud.title }}
                </el-button>
            </div>
        </div>
        <!--表单渲染-->
        <el-dialog append-to-body :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
            :title="crud.status.title" width="400px">
            <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
                <el-row :gutter="10">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="姓名" prop="nickName">
                            <el-input v-model="form.nickName" placeholder="请输入姓名"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="性别">
                            <el-select v-model="form.gender" placeholder="请选择性别" clearable>
                                <el-option v-for="item in dict.common_gender" :key="item.id" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="手机号" prop="phone">
                            <el-input type="tel" v-model.number="form.phone" placeholder="请输入手机号"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="用户类型" prop="userType">
                            <el-select v-model="form.userType" placeholder="请选择用户类型" clearable>
                                <el-option v-for="(item,index) in userTypes" :key="index" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer" style="margin-top: -30px;">
                <el-button type="text" @click="crud.cancelCU">取消</el-button>
                <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">保存</el-button>
            </div>
        </el-dialog>
        <!--表格渲染-->
        <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;">
            <el-table-column :show-overflow-tooltip="true" prop="nickName" label="姓名" />
            <el-table-column :show-overflow-tooltip="true" prop="gender" label="性别">
                <template slot-scope="scope">
                    <el-tag size="medium" v-if="Number(scope.row.gender) === 0">男</el-tag>
                    <el-tag size="medium" v-else type="danger">女</el-tag>
                </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="phone" label="手机号" />
            <el-table-column :show-overflow-tooltip="true" prop="userType" label="用户类型" />
            <el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建时间" />
            <el-table-column :show-overflow-tooltip="true" prop="enable" label="用户状态">
                <template slot-scope="scope">
                    <el-tag size="medium" v-if="Number(scope.row.enable) === 1" type="success">启用</el-tag>
                    <el-tag size="medium" v-else type="danger">停用</el-tag>
                </template>
            </el-table-column>
            <el-table-column v-if="checkPer(['admin', 'customer:enable', 'customer:del'])" label="操作" align="center"
                fixed="right">
                <template slot-scope="scope">
                    <el-button v-permission="permission.enable" size="mini" :type="Number(scope.row.enable) === 1 ?'info':'primary'" 
                    @click.stop="toEnable(scope.row)">{{ Number(scope.row.enable) === 1 ? '停用' : '启用' }}</el-button>
                    <el-popover v-model="pop" v-permission="permission.del" placement="top" width="180" trigger="manual" @show="pop = false" @hide="pop = false">
                        <p>确定删除本条数据吗？</p>
                        <div style="text-align: right; margin: 0">
                            <el-button size="mini" type="text" @click="pop = false;crud.cancelDelete(scope.row)">取消</el-button>
                            <el-button :loading="crud.dataStatus[crud.getDataId(scope.row)].delete === 2" type="primary" size="mini" @click="crud.doDelete(scope.row)">确定</el-button>
                        </div>
                        <el-button slot="reference" type="danger" size="mini" @click.stop="pop = true">删除</el-button>
                    </el-popover>
                </template>
            </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />
    </div>
</template>
<script>
import crudCustomer from '@/api/system/customer'
import { isvalidPhone } from '@/utils/validate'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'
const defaultForm = { phone: null, nickName: null, gender: null, userType: null }
export default {
  name: 'Customer',
  components: { rrOperation, pagination },
  // 数据字典
  dicts: ['common_gender'],
  cruds() {
    return CRUD({ title: '客户', url: '/aerocraftAdminApi/cnCustomer', crudMethod: { ...crudCustomer }, optShow: { add: true, reset: true }})
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  data(){
    // 自定义验证
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入电话号码'))
      } else if (!isvalidPhone(value)) {
        callback(new Error('请输入正确的11位手机号码'))
      } else {
        callback()
      }
    }
    return {
        permission: {
            add: ['admin', 'customer:add'],
            enable: ['admin', 'customer:enable'],
            del: ['admin', 'customer:del']
        },
        pop: false,
        userTypes: [
            { label: '普通用户', value: '普通用户' },
            { label: '公司对接人', value: '公司对接人' }
        ],
        rules: {
            gender: [
                { required: true, message: '请选择性别', trigger: 'change' },
            ],
            userType: [
                { required: true, message: '请选择用户类型', trigger: 'change' },
            ],
            nickName: [
                { required: true, message: '请输入姓名', trigger: 'blur' },
                { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
            ],
            phone: [
                { required: true, trigger: 'blur', validator: validPhone }
            ],
        }
    }
  },
  created() {
  },
  methods: {
    // 启/停用客户账号
    toEnable(row){
        row.enable = Number(row.enable) === 1 ? 0 : 1;
    },
    [CRUD.HOOK.beforeRefresh](crud, form) {
      crud.query.current = crud.page.page;
    }
  }
}
</script>
<style scoped>
::v-deep .el-select{
    width: 100%;
}
</style>