379 lines
15 KiB
HTML
379 lines
15 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
<style>
|
|
.avatar-uploader .el-upload {
|
|
border: 1px dashed #d9d9d9;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.avatar-uploader .el-upload:hover {
|
|
border-color: #409EFF;
|
|
}
|
|
|
|
.avatar-uploader-icon {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 178px;
|
|
height: 178px;
|
|
line-height: 178px;
|
|
text-align: center;
|
|
}
|
|
|
|
.avatar {
|
|
width: 150px;
|
|
display: block;
|
|
}
|
|
|
|
.el-popover {
|
|
text-align: center;
|
|
}
|
|
|
|
</style>
|
|
<div id="app">
|
|
<guava ref="guava">
|
|
<el-card shadow="never">
|
|
<div class="btn-group tool-button mt5">
|
|
<el-input placeholder="请输入内容" v-model="pageForm.searchKeyword" clearable @keyup.enter.native="doSearch">
|
|
<el-select v-model="pageForm.searchName" slot="prepend" placeholder="查询类型" style="width: 120px;">
|
|
<el-option label="姓名" value="u.username"></el-option>
|
|
<el-option label="工号" value="u.loginname"></el-option>
|
|
</el-select>
|
|
</el-input>
|
|
</div>
|
|
|
|
<div class="btn-group tool-button mt5">
|
|
<el-button type="primary" icon="el-icon-search" @click="doSearch">搜索</el-button>
|
|
</div>
|
|
|
|
<div class="pull-right offscreen-right mt5">
|
|
<el-button type="primary" @click="openAdd">
|
|
<i class="ti-plus"></i>
|
|
新增咨询师
|
|
</el-button>
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-card shadow="never" class="mt10">
|
|
<table-tool label="咨询师列表" :app="this">
|
|
<template #func>
|
|
|
|
</template>
|
|
</table-tool>
|
|
<el-table :data="tableData" stripe border :size="tableSize" style="width: 100%">
|
|
<el-table-column type="index" label="序号" width="80px"></el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
header-align="center"
|
|
v-for="column in tableColumns"
|
|
show-overflow-tooltip
|
|
:label="column.label"
|
|
:prop="column.prop"
|
|
:sortable="column.sortable"
|
|
>
|
|
|
|
<template v-if="column.prop==='avatar'" scope="{row}">
|
|
<el-popover
|
|
placement="top-start"
|
|
width="100"
|
|
trigger="hover">
|
|
<el-image
|
|
style="height: 100px"
|
|
:src="APP_DOMAIN+FILE_STREAM_PREVIEW_ADDRESS+'?id='+row.avatar"
|
|
fit="cover">
|
|
<div slot="error" class="image-slot">
|
|
<i class="el-icon-picture-outline"></i>
|
|
</div>
|
|
</el-image>
|
|
<el-image
|
|
slot="reference"
|
|
style="height: 30px;"
|
|
:src="APP_DOMAIN+FILE_STREAM_PREVIEW_ADDRESS+'?id='+row.avatar"
|
|
fit="cover">
|
|
<div slot="error" class="image-slot">
|
|
<i class="el-icon-picture-outline"></i>
|
|
</div>
|
|
</el-image>
|
|
</el-popover>
|
|
</template>
|
|
|
|
</el-table-column>
|
|
<el-table-column align="center" header-align="center" label="操作" width="250">
|
|
<template scope="{row}">
|
|
<el-button size="small" @click="openView(row)">查看</el-button>
|
|
<el-button size="small" type="primary" @click="openEdit(row)">编辑</el-button>
|
|
<el-button size="small" type="danger" @click="doDelete(row.id)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!--#include("/layouts/pagination.html"){}#-->
|
|
</el-card>
|
|
|
|
<template #edit>
|
|
<!-- <h3 style="color: rgb(24, 103, 176);">录入咨询师信息</h3>-->
|
|
<el-form :model="formData" :rules="rules" ref="ruleForm" label-width="100px" style="width: 1000px">
|
|
<el-row type="flex" :gutter="12">
|
|
<el-col :span="8">
|
|
<el-form-item label="姓名" prop="userid">
|
|
<el-select
|
|
style="width: 100%"
|
|
v-model="formData.userid"
|
|
filterable
|
|
remote
|
|
reserve-keyword
|
|
placeholder="请输入关键词"
|
|
:remote-method="selectQueryUser"
|
|
@change="selectUserChange"
|
|
>
|
|
<el-option
|
|
v-for="item in selectUserList"
|
|
:key="item.id"
|
|
:label="item.username"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="性别" prop="sex">
|
|
<el-input v-model="formData.sex"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="职称" prop="jobTitle">
|
|
<el-input v-model="formData.jobTitle"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-form-item label="单位" prop="unitName">
|
|
<el-input v-model="formData.unitName"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="电话" prop="mobile">
|
|
<el-input v-model.trim="formData.mobile"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="特长" prop="specialty">
|
|
<el-input type="textarea" :rows="3" v-model="formData.specialty"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="简介" prop="introduce">
|
|
<el-input type="textarea" :rows="3" v-model="formData.introduce"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="头像" prop="avatar">
|
|
<el-upload
|
|
class="avatar-uploader"
|
|
:action="FILE_UPLOAD_ADDRESS"
|
|
:show-file-list="false"
|
|
:on-success="handleAvatarSuccess"
|
|
:before-upload="beforeAvatarUpload">
|
|
<img v-if="formData.avatar" :src="APP_DOMAIN+FILE_STREAM_PREVIEW_ADDRESS+'?id='+formData.avatar"
|
|
class="avatar">
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
<div slot="tip" class="el-upload__tip">请上传一寸登记照，格式为jpg、png、jpeg的图片</div>
|
|
</el-upload>
|
|
</el-form-item>
|
|
|
|
<el-form-item class="text-right">
|
|
<el-button @click="$refs.guava.index()">取消</el-button>
|
|
<el-button type="primary" @click="doHandle">确定</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
</template>
|
|
|
|
<template #view>
|
|
<!-- <h3 style="color: rgb(24, 103, 176);">录入咨询师信息</h3>-->
|
|
<el-form :model="viewData" label-width="100px" style="width: 1000px">
|
|
<el-row type="flex" :gutter="12">
|
|
<el-col :span="8">
|
|
<el-form-item readonly label="姓名">
|
|
<el-input readonly v-model="viewData.username"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="性别">
|
|
<el-input readonly v-model="viewData.sex"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="职称">
|
|
<el-input readonly v-model="viewData.jobTitle"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-form-item label="单位">
|
|
<el-input readonly v-model="viewData.unitName"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="电话">
|
|
<el-input readonly v-model="viewData.mobile"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="特长">
|
|
<el-input readonly type="textarea" :rows="3" v-model="viewData.specialty"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="简介">
|
|
<el-input readonly type="textarea" :rows="3" v-model="viewData.introduce"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="头像">
|
|
<img v-if="viewData.avatar" :src="APP_DOMAIN+FILE_STREAM_PREVIEW_ADDRESS+'?id='+viewData.avatar"
|
|
class="avatar">
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
</template>
|
|
|
|
</guava>
|
|
</div>
|
|
|
|
<script>
|
|
var vue = new Vue({
|
|
el: '#app',
|
|
mixins: [initTableMixins],
|
|
data() {
|
|
return {
|
|
selectUserList: [],
|
|
rules: {
|
|
userid: [{required: true, message: '请输入姓名', trigger: ['change', 'blur']}],
|
|
sex: [{required: true, message: '请选择性别', trigger: ['change', 'blur']}],
|
|
jobTitle: [{required: true, message: '请输入职称', trigger: ['change', 'blur']}],
|
|
//mobile: [{required: true, message: '请输入电话', trigger: ['change', 'blur']}],
|
|
specialty: [{required: true, message: '请输入特长', trigger: ['change', 'blur']}],
|
|
introduce: [{required: true, message: '请输入简介', trigger: ['change', 'blur']}],
|
|
avatar: [{required: true, message: '请上传头像', trigger: ['change', 'blur']}],
|
|
},
|
|
tableColumns: [
|
|
{prop: 'loginname', label: '工号'},
|
|
{prop: 'username', label: '姓名'},
|
|
{prop: 'sex', label: '性别'},
|
|
{prop: 'unitName', label: '单位'},
|
|
{prop: 'jobTitle', label: '职称'},
|
|
{prop: 'mobile', label: '联系电话'},
|
|
{prop: 'avatar', label: '头像'}
|
|
],
|
|
formData: {
|
|
userid: null,
|
|
sex: null,
|
|
unitName: null,
|
|
jobTitle: null,
|
|
mobile: null,
|
|
avatar: null,
|
|
specialty: null,
|
|
introduce: null,
|
|
},
|
|
pageForm: {
|
|
searchName: 'u.username'
|
|
},
|
|
viewData: {}
|
|
}
|
|
},
|
|
components: {},
|
|
methods: {
|
|
openAdd() {
|
|
this.selectUserList = []
|
|
this.$refs['guava'].edit()
|
|
this.$refs['ruleForm'].resetFields()
|
|
this.formData.id = undefined
|
|
this.formData.loginname = undefined
|
|
this.formData.username = undefined
|
|
},
|
|
async selectQueryUser(keyWord) {
|
|
this.selectUserList = await searchUser(keyWord, null, null, null, null)
|
|
},
|
|
selectUserChange(val) {
|
|
if (val) {
|
|
const user = this.selectUserList.find(v => v.id === val)
|
|
this.$set(this.formData, 'sex', user.sex)
|
|
this.$set(this.formData, 'mobile', user.mobile)
|
|
this.$set(this.formData, 'unitName', user.unitname)
|
|
}
|
|
},
|
|
async doHandle() {
|
|
const valid = await this.$refs['ruleForm'].validate()
|
|
if (valid) {
|
|
const methodName = typeof this.formData.id === 'undefined' ? '/doAdd' : '/doEdit'
|
|
const resp = await $.post(loc() + methodName, this.formData)
|
|
switch (resp.code) {
|
|
case 0:
|
|
this.notifySuccess(resp.msg)
|
|
this.doSearch()
|
|
this.$refs['guava'].index()
|
|
break
|
|
case 1:
|
|
this.notifyError(resp.msg)
|
|
break
|
|
case 2:
|
|
this.notifyWarning(resp.msg)
|
|
break
|
|
}
|
|
}
|
|
},
|
|
|
|
openView(row) {
|
|
this.viewData = row
|
|
this.$refs['guava'].view()
|
|
|
|
},
|
|
openEdit(row) {
|
|
this.$refs['guava'].edit()
|
|
this.selectUserList = [
|
|
{
|
|
id: row.userid,
|
|
username: row.username,
|
|
loginname: row.loginname
|
|
}
|
|
]
|
|
this.formData = JSON.parse(JSON.stringify(row))
|
|
},
|
|
async doDelete(id) {
|
|
const confirm = await this.$confirm('确定删除吗?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
if (confirm === 'confirm') {
|
|
const resp = await $.post(loc() + '/doDelete', {id})
|
|
if (resp.code === 0) {
|
|
this.$notify.success(resp.msg)
|
|
this.doSearch()
|
|
}
|
|
}
|
|
},
|
|
|
|
|
|
async handleAvatarSuccess(res, file) {
|
|
this.$set(this.formData, 'avatar', res.data.filepath)
|
|
await this.$refs['ruleForm'].validate()
|
|
},
|
|
beforeAvatarUpload(file) {
|
|
console.log(file.type)
|
|
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
if (!isJPG) {
|
|
this.$message.error('上传头像图片只能是 jpg、png、jpeg 格式!');
|
|
}
|
|
if (!isLt2M) {
|
|
this.$message.error('上传头像图片大小不能超过 2MB!');
|
|
}
|
|
return isJPG && isLt2M;
|
|
}
|
|
|
|
},
|
|
created() {
|
|
this.pageData()
|
|
}
|
|
})
|
|
</script>
|
|
<!--#
|
|
}
|
|
#--> |