418 lines
13 KiB
Vue
418 lines
13 KiB
Vue
<template>
|
||
<el-row>
|
||
<el-col :span="4">
|
||
<div class="left-box">
|
||
<div class="title-h">公司机构</div>
|
||
<div class="xzbox">
|
||
<span>当前选择：{{xtitle}}</span>
|
||
</div>
|
||
<el-input
|
||
placeholder="请输入机构名称查询"
|
||
v-model="filterText">
|
||
</el-input>
|
||
|
||
<el-tree :data="Thetree"
|
||
:props="defaultProps"
|
||
node-key="id"
|
||
ref="tree"
|
||
:default-expanded-keys="[200, 201]"
|
||
:default-checked-keys="[206]"
|
||
:filter-node-method="filterNode"
|
||
@node-click="handleNodeClick"></el-tree>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="20">
|
||
<div class="app-container">
|
||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||
<!-- <el-form-item label="区域名称" prop="customerName">-->
|
||
<!-- <el-input-->
|
||
<!-- v-model="queryParams.customerName"-->
|
||
<!-- placeholder="请输入客户名称"-->
|
||
<!-- clearable-->
|
||
<!-- @keyup.enter.native="handleQuery"-->
|
||
<!-- />-->
|
||
<!-- </el-form-item>-->
|
||
<!-- <el-form-item>-->
|
||
<!-- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
|
||
<!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
|
||
<!-- </el-form-item>-->
|
||
</el-form>
|
||
|
||
<el-row :gutter="10" class="mb8">
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="primary"
|
||
plain
|
||
icon="el-icon-plus"
|
||
size="mini"
|
||
@click="handleAdd"
|
||
>新增</el-button>
|
||
</el-col>
|
||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||
</el-row>
|
||
|
||
<el-table v-loading="loading" :data="rescueCustomerList" @selection-change="handleSelectionChange">
|
||
<el-table-column label="序号" align="center">
|
||
<template scope="scope">
|
||
<span>{{ scope.$index + 1 }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- <el-table-column type="selection" width="55" align="center" />-->
|
||
<!-- <el-table-column label="主键" align="center" prop="id" />-->
|
||
<el-table-column label="机构" align="center" prop="deptName" />
|
||
<el-table-column label="第一梯队" align="center" prop="firstDriverName" />
|
||
<el-table-column label="第二梯队" align="center" prop="secondDriverName" />
|
||
<el-table-column label="第三梯队" align="center" prop="thirdDriverName" />
|
||
<!-- <el-table-column label="签约开始日期" align="center" prop="signStartDate" width="180">-->
|
||
<!-- <template slot-scope="scope">-->
|
||
<!-- <span>{{ parseTime(scope.row.signStartDate, '{y}-{m}-{d}') }}</span>-->
|
||
<!-- </template>-->
|
||
<!-- </el-table-column>-->
|
||
|
||
|
||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-edit"
|
||
@click="handleUpdate(scope.row)"
|
||
>修改</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-delete"
|
||
@click="handleDelete(scope.row)"
|
||
>删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<pagination
|
||
v-show="total>0"
|
||
:total="total"
|
||
:page.sync="queryParams.pageNo"
|
||
:limit.sync="queryParams.pageSize"
|
||
@pagination="getList"
|
||
/>
|
||
|
||
<!-- 添加或修改救援的客户信息对话框 -->
|
||
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
|
||
|
||
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
||
<el-form-item label="司机公司" prop="deptName">
|
||
|
||
<span style="font-weight: bold; font-size: 16px">{{ form.deptName ||xtitle}}</span>
|
||
</el-form-item>
|
||
<el-form-item label="第一梯队" prop="firstDriverIds">
|
||
<el-select v-model="form.firstDriverIds" filterable multiple placeholder="请选择">
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.id"
|
||
:label="item.nickName"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="第二梯队" prop="secondDriverIds">
|
||
<el-select v-model="form.secondDriverIds" filterable multiple placeholder="请选择">
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.id"
|
||
:label="item.nickName"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="第三梯队" prop="thirdDriverIds">
|
||
<el-select v-model="form.thirdDriverIds" filterable multiple placeholder="请选择">
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.id"
|
||
:label="item.nickName"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||
<el-button @click="cancel">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</el-col>
|
||
|
||
</el-row>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
driverlist,
|
||
edept_driver,
|
||
dept_driver,
|
||
listRescueCustomer,
|
||
getRescueCustomer,
|
||
delRescueCustomer,
|
||
addRescueCustomer,
|
||
updateRescueCustomer,
|
||
getdeptTree,
|
||
driverList,
|
||
delete_dept_driver
|
||
} from './api/rescueCustomer'
|
||
|
||
export default {
|
||
name: "RescueCustomer",
|
||
dicts: ['dljy_type'],
|
||
data() {
|
||
return {
|
||
filterText:'',
|
||
defaultProps: {
|
||
children: 'children',
|
||
label: 'name'
|
||
},
|
||
value1:[],
|
||
value2:[],
|
||
value3:[],
|
||
options: [{
|
||
value: '选项1',
|
||
label: '黄金糕'
|
||
}, {
|
||
value: '选项2',
|
||
label: '双皮奶'
|
||
}, {
|
||
value: '选项3',
|
||
label: '蚵仔煎'
|
||
}, {
|
||
value: '选项4',
|
||
label: '龙须面'
|
||
}, {
|
||
value: '选项5',
|
||
label: '北京烤鸭'
|
||
}],
|
||
// 遮罩层
|
||
loading: true,
|
||
// 选中数组
|
||
ids: [],
|
||
// 非单个禁用
|
||
single: true,
|
||
// 非多个禁用
|
||
multiple: true,
|
||
// 显示搜索条件
|
||
showSearch: true,
|
||
// 总条数
|
||
total: 0,
|
||
// 救援的客户信息表格数据
|
||
rescueCustomerList: [],
|
||
// 弹出层标题
|
||
title: "",
|
||
xtitle:'',
|
||
xid:'',
|
||
// 是否显示弹出层
|
||
open: false,
|
||
pageNo: 1,//第几页
|
||
pageSize: 999,//一页多少张
|
||
// 查询参数
|
||
queryParams: {
|
||
firstDriverIds:[],
|
||
secondDriverIds:[],
|
||
thirdDriverIds:[],
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
customerName: null,
|
||
customerPhone: null,
|
||
customerDeptId: null,
|
||
signStartDate: null,
|
||
signEndDate: null,
|
||
defaultRescueType: null,
|
||
},
|
||
Thetree:[],
|
||
// 表单参数
|
||
form: {},
|
||
// 表单校验
|
||
rules: {
|
||
customerName: [
|
||
{ required: true, message: '不能为空', trigger: 'blur' },
|
||
],
|
||
customerPhone: [
|
||
{ required: true, message: '不能为空', trigger: 'blur' },
|
||
],
|
||
orderPrefix: [
|
||
{ required: true, message: '不能为空', trigger: 'blur' },
|
||
],
|
||
},
|
||
|
||
};
|
||
},
|
||
created() {
|
||
this.getList();
|
||
},
|
||
watch: {
|
||
filterText(val) {
|
||
this.$refs.tree.filter(val);
|
||
}
|
||
},
|
||
methods: {
|
||
filterNode(value, data) {
|
||
if (!value) return true
|
||
return data.name.indexOf(value) !== -1
|
||
},
|
||
handleCheckChange(data, checked, indeterminate) {
|
||
// console.log(data, checked, indeterminate);
|
||
},
|
||
handleNodeClick(data) {
|
||
this.xid = data.id
|
||
// this.form.customerDeptId
|
||
this.xtitle = data.name
|
||
// console.log('x',data);
|
||
// console.log(this.form.customerDeptId)
|
||
},
|
||
/** 查询救援的客户信息列表 */
|
||
getList() {
|
||
this.loading = true;
|
||
driverlist(this.queryParams).then(response => {
|
||
this.rescueCustomerList = response.data.records;
|
||
this.total = response.data.total;
|
||
this.loading = false;
|
||
});
|
||
getdeptTree().then(res=>{
|
||
this.Thetree = this.handleTree(res.data, 'id')
|
||
})
|
||
let data = {
|
||
pageNo: 1,
|
||
pageSize: 999,
|
||
}
|
||
driverList(data).then(res=>{
|
||
// console.log(res)
|
||
this.options = res.data.records
|
||
})
|
||
},
|
||
// 取消按钮
|
||
cancel() {
|
||
this.open = false;
|
||
this.reset();
|
||
},
|
||
// 表单重置
|
||
reset() {
|
||
this.form = {
|
||
firstDriverIds:null,
|
||
secondDriverIds:null,
|
||
thirdDriverIds:null,
|
||
deptId: null,
|
||
|
||
};
|
||
this.resetForm("form");
|
||
},
|
||
/** 搜索按钮操作 */
|
||
handleQuery() {
|
||
this.queryParams.pageNo = 1;
|
||
this.getList();
|
||
},
|
||
/** 重置按钮操作 */
|
||
resetQuery() {
|
||
this.resetForm("queryForm");
|
||
this.handleQuery();
|
||
},
|
||
// 多选框选中数据
|
||
handleSelectionChange(selection) {
|
||
this.ids = selection.map(item => item.id)
|
||
this.single = selection.length!==1
|
||
this.multiple = !selection.length
|
||
},
|
||
/** 新增按钮操作 */
|
||
handleAdd() {
|
||
if(this.xtitle == ''){
|
||
this.$modal.msgSuccess("请先选择部门");
|
||
return
|
||
}
|
||
this.reset();
|
||
this.open = true;
|
||
this.title = "添加司机信息";
|
||
this.form.deptId = this.xid
|
||
},
|
||
/** 修改按钮操作 */
|
||
handleUpdate(row) {
|
||
const data = {
|
||
...row,
|
||
firstDriverIds: row.firstDriverIds ? row.firstDriverIds.split(",").map(id => parseInt(id)) : "",
|
||
secondDriverIds: row.secondDriverIds ? row.secondDriverIds.split(",").map(id => parseInt(id)) : "",
|
||
thirdDriverIds: row.thirdDriverIds ? row.thirdDriverIds.split(",").map(id => parseInt(id)) : ""
|
||
}
|
||
this.form = data
|
||
// console.log(this.form)
|
||
this.open = true;
|
||
this.title = "修改救援的客户信息";
|
||
},
|
||
/** 提交按钮 */
|
||
submitForm() {
|
||
|
||
this.$refs["form"].validate(valid => {
|
||
if (valid) {
|
||
if (this.form.id != null) {
|
||
this.form.firstDriverIds = this.form.firstDriverIds ? this.form.firstDriverIds.join(",") : null
|
||
this.form.secondDriverIds = this.form.secondDriverIds ? this.form.secondDriverIds.join(",") : null
|
||
this.form.thirdDriverIds = this.form.thirdDriverIds ? this.form.thirdDriverIds.join(",") : null
|
||
edept_driver(this.form).then(response => {
|
||
this.$modal.msgSuccess("修改成功");
|
||
this.open = false;
|
||
this.getList();
|
||
});
|
||
} else {
|
||
this.form.firstDriverIds = this.form.firstDriverIds.join(",")
|
||
this.form.secondDriverIds = this.form.secondDriverIds.join(",")
|
||
this.form.thirdDriverIds = this.form.thirdDriverIds.join(",")
|
||
dept_driver(this.form).then(response => {
|
||
this.$modal.msgSuccess("新增成功");
|
||
this.open = false;
|
||
this.getList();
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
/** 删除按钮操作 */
|
||
handleDelete(row) {
|
||
const ids = row.id || this.ids;
|
||
this.$modal.confirm('是否确认删除救援的客户信息编号为"' + ids + '"的数据项？').then(function() {
|
||
return delete_dept_driver(ids);
|
||
}).then(() => {
|
||
this.getList();
|
||
this.$modal.msgSuccess("删除成功");
|
||
}).catch(() => {});
|
||
},
|
||
/** 导出按钮操作 */
|
||
handleExport() {
|
||
this.download('rescueCustomer/rescueCustomer/export', {
|
||
...this.queryParams
|
||
}, `rescueCustomer_${new Date().getTime()}.xlsx`)
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style>
|
||
.left-box{
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
}
|
||
.title-h{
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-bottom: 20px;
|
||
}
|
||
.xzbox{
|
||
width: 100%;
|
||
margin: 5px auto;
|
||
border-radius: 8px;
|
||
height: 40px;
|
||
box-sizing: border-box;
|
||
padding: 0px 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
color: #409EFF;
|
||
|
||
/*background: #99a9bf;*/
|
||
}
|
||
</style>
|