5 changed files with 1085 additions and 1892 deletions
@ -1,310 +1,268 @@ |
|||
<template> |
|||
<div class="worker-edit"> |
|||
<!-- Drawer抽屉 --> |
|||
<Drawer |
|||
:title="title" |
|||
v-model="visible" |
|||
width="720" |
|||
draggable |
|||
:mask-closable="type == '0'" |
|||
> |
|||
<div :style="{ maxHeight: maxHeight }" class="drawer-content"> |
|||
<div class="drawer-header"> |
|||
<div style="margin-right: 16px">基本信息</div> |
|||
</div> |
|||
<Form label-colon v-show="type != '2'"> |
|||
<Row :gutter="32"> |
|||
<Col span="12"> |
|||
<FormItem label="快递员ID"> |
|||
{{ form.workerId }} |
|||
<Tooltip trigger="hover" placement="right" content="账户已禁用"> |
|||
<Icon |
|||
v-show="form.workerStatus == 3" |
|||
type="md-lock" |
|||
size="18" |
|||
style="margin-left: 10px; cursor: pointer" |
|||
/> |
|||
</Tooltip> |
|||
</FormItem> |
|||
</Col> |
|||
<Col span="12"> |
|||
<FormItem label="快递员状态"> |
|||
{{ this.statusName }} |
|||
<Icon |
|||
v-show="form.workerStatus" |
|||
type="md-key" |
|||
:color="passColor" |
|||
size="18" |
|||
style="margin-left: 10px; cursor: pointer" |
|||
/> |
|||
</FormItem> |
|||
</Col> |
|||
</Row> |
|||
</Form> |
|||
<Form |
|||
ref="form" |
|||
:model="form" |
|||
:rules="formValidate" |
|||
label-position="top" |
|||
> |
|||
<Row :gutter="32"> |
|||
<Col span="12"> |
|||
<FormItem label="登录账号" prop="username"> |
|||
<Input v-model="form.username" /> |
|||
</FormItem> |
|||
</Col> |
|||
<Col span="12"> |
|||
<FormItem label="登录密码" prop="password"> |
|||
<SetPassword v-model="form.password" @on-change="changePass" /> |
|||
</FormItem> |
|||
</Col> |
|||
</Row> |
|||
<Row :gutter="32"> |
|||
<Col span="12"> |
|||
<FormItem label="快递员名称" prop="workerName"> |
|||
<Input v-model="form.workerName" /> |
|||
</FormItem> |
|||
</Col> |
|||
<Col span="12"> |
|||
<FormItem label="归属商圈" prop="region"> |
|||
<region-tree-choose |
|||
@on-change="handleSelectRegion" |
|||
ref="regionTree" |
|||
></region-tree-choose> |
|||
</FormItem> |
|||
</Col> |
|||
</Row> |
|||
<Row :gutter="32"> |
|||
<Col span="12"> |
|||
<FormItem label="当次应缴" prop="depoNum"> |
|||
<Input v-model="form.depoNum" /> |
|||
</FormItem> |
|||
</Col> |
|||
<Col span="12"> |
|||
<FormItem label="押金余额" prop="depoBal"> |
|||
<Input v-model="form.depoBal" :disabled="true"/> |
|||
</FormItem> |
|||
</Col> |
|||
</Row> |
|||
<Row :gutter="32"> |
|||
<Col span="12"> |
|||
<FormItem label="电话" prop="mobile"> |
|||
<Input v-model="form.mobile" /> |
|||
</FormItem> |
|||
</Col> |
|||
<Col span="24"> |
|||
<FormItem label="快递员简介"> |
|||
<Input type="textarea" v-model="form.workerDescribe" :rows="4" /> |
|||
</FormItem> |
|||
</Col> |
|||
</Row> |
|||
<Row :gutter="32"> |
|||
<Col span="12"> |
|||
<FormItem label="所属公司" prop="ownerCompany"> |
|||
<Select v-model="form.ownerCompany" multiple transfer> |
|||
<Option |
|||
v-for="item in companyList" |
|||
:value="item.id" |
|||
:key="item.id" |
|||
:label="item.companyName" |
|||
> |
|||
<span style="margin-right: 10px">{{ item.companyName }}</span> |
|||
</Option> |
|||
</Select> |
|||
</FormItem> |
|||
</Col> |
|||
</Row> |
|||
<Row :gutter="32"> |
|||
<Col span="24"> |
|||
<FormItem label="快递员收费标准说明"> |
|||
<Input type="textarea" v-model="form.remark" :rows="4" /> |
|||
</FormItem> |
|||
</Col> |
|||
</Row> |
|||
</Form> |
|||
</div> |
|||
<div class="drawer-footer br" v-show="type != '0'"> |
|||
<Button type="primary" :loading="submitLoading" @click="submit" |
|||
>提交</Button |
|||
> |
|||
<Button @click="visible = false">取消</Button> |
|||
</div> |
|||
</Drawer> |
|||
</div> |
|||
<div class="worker-edit"> |
|||
<!-- Drawer抽屉 --> |
|||
<Drawer :title="title" v-model="visible" width="720" draggable :mask-closable="type == '0'"> |
|||
<div :style="{ maxHeight: maxHeight }" class="drawer-content"> |
|||
<div class="drawer-header"> |
|||
<div style="margin-right: 16px">基本信息</div> |
|||
</div> |
|||
<Form label-colon v-show="type != '2'"> |
|||
<Row :gutter="32"> |
|||
<Col span="12"> |
|||
<FormItem label="配送员ID"> |
|||
{{ form.workerId }} |
|||
<Tooltip trigger="hover" placement="right" content="账户已禁用"> |
|||
<Icon v-show="form.workerStatus == 3" type="md-lock" size="18" |
|||
style="margin-left: 10px; cursor: pointer" /> |
|||
</Tooltip> |
|||
</FormItem> |
|||
</Col> |
|||
<Col span="12"> |
|||
<FormItem label="配送员状态"> |
|||
{{ this.statusName }} |
|||
<Icon v-show="form.workerStatus" type="md-key" :color="passColor" size="18" |
|||
style="margin-left: 10px; cursor: pointer" /> |
|||
</FormItem> |
|||
</Col> |
|||
</Row> |
|||
</Form> |
|||
<Form ref="form" :model="form" :rules="formValidate" label-position="top"> |
|||
<Row :gutter="32"> |
|||
<Col span="12"> |
|||
<FormItem label="登录账号" prop="username"> |
|||
<Input v-model="form.username" /> |
|||
</FormItem> |
|||
</Col> |
|||
<Col span="12"> |
|||
<FormItem label="登录密码" prop="password"> |
|||
<SetPassword v-model="form.password" @on-change="changePass" /> |
|||
</FormItem> |
|||
</Col> |
|||
</Row> |
|||
<Row :gutter="32"> |
|||
<Col span="12"> |
|||
<FormItem label="配送员名称" prop="workerName"> |
|||
<Input v-model="form.workerName" /> |
|||
</FormItem> |
|||
</Col> |
|||
<Col span="12"> |
|||
<FormItem label="所属学校" prop="region"> |
|||
<Input v-model="form.regionTitle" disabled /> |
|||
</FormItem> |
|||
</Col> |
|||
</Row> |
|||
<Row :gutter="32"> |
|||
<Col span="12"> |
|||
<FormItem label="佣金余额" prop="depoBal"> |
|||
<Input v-model="form.depoBal" /> |
|||
</FormItem> |
|||
</Col> |
|||
<Col span="12"> |
|||
<FormItem label="交易保障金" prop="rebateAmount"> |
|||
<Input v-model="form.rebateAmount" :disabled="true" /> |
|||
</FormItem> |
|||
</Col> |
|||
</Row> |
|||
<Row :gutter="32"> |
|||
<Col span="12"> |
|||
<FormItem label="电话" prop="mobile"> |
|||
<Input v-model="form.mobile" /> |
|||
</FormItem> |
|||
</Col> |
|||
<Col span="24"> |
|||
<FormItem label="配送员简介"> |
|||
<Input type="textarea" v-model="form.workerDescribe" :rows="4" /> |
|||
</FormItem> |
|||
</Col> |
|||
</Row> |
|||
<Row :gutter="32"> |
|||
<Col span="24"> |
|||
<FormItem label="配送员收费标准说明"> |
|||
<Input type="textarea" v-model="form.remark" :rows="4" /> |
|||
</FormItem> |
|||
</Col> |
|||
</Row> |
|||
</Form> |
|||
</div> |
|||
<div class="drawer-footer br" v-show="type != '0'"> |
|||
<Button type="primary" :loading="submitLoading" @click="submit">提交</Button> |
|||
<Button @click="visible = false">取消</Button> |
|||
</div> |
|||
</Drawer> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getAllRoleList, addWorker, editWorker } from "@/api/index"; |
|||
import { getLogiticsCompanyList } from "@/api/app"; |
|||
import { |
|||
validateUsername, |
|||
validateMobile, |
|||
validatePassword, |
|||
} from "@/libs/validate"; |
|||
import departmentTreeChoose from "@/views/my-components/hiver/department-tree-choose"; |
|||
import uploadPicInput from "@/views/my-components/hiver/upload-pic-input"; |
|||
import SetPassword from "@/views/my-components/hiver/set-password"; |
|||
import dict from "@/views/my-components/hiver/dict"; |
|||
import regionTreeChoose from "@/views/my-components/hiver/region-tree-choose"; |
|||
export default { |
|||
name: "addEdit", |
|||
components: { |
|||
regionTreeChoose, |
|||
departmentTreeChoose, |
|||
uploadPicInput, |
|||
SetPassword, |
|||
dict, |
|||
}, |
|||
props: { |
|||
value: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
data: { |
|||
type: Object, |
|||
}, |
|||
type: { |
|||
type: String, |
|||
default: "0", |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
roleList: [], |
|||
visible: this.value, |
|||
title: "", |
|||
passColor: "", |
|||
statusName: "", |
|||
submitLoading: false, |
|||
maxHeight: 510, |
|||
form: { |
|||
signPerson: "2", |
|||
}, |
|||
formValidate: {}, |
|||
companyList: [], |
|||
companyForm: { |
|||
signCompany: "1", |
|||
}, |
|||
}; |
|||
}, |
|||
methods: { |
|||
init() { |
|||
this.getRoleList(); |
|||
this.getCompanyList(); |
|||
}, |
|||
getRoleList() { |
|||
getAllRoleList().then((res) => { |
|||
if (res.success) { |
|||
this.roleList = res.result; |
|||
} |
|||
}); |
|||
}, |
|||
getCompanyList() { |
|||
getLogiticsCompanyList(this.companyForm).then((res) => { |
|||
if (res.success) { |
|||
this.companyList = res.result; |
|||
} |
|||
}); |
|||
}, |
|||
handleSelectRegion(v) { |
|||
this.form.region = v; |
|||
}, |
|||
changePass(v, grade, strength) { |
|||
this.form.passStrength = strength; |
|||
}, |
|||
submit() { |
|||
this.$refs.form.validate((valid) => { |
|||
if (valid) { |
|||
if (this.type == "1") { |
|||
// 编辑 |
|||
this.submitLoading = true; |
|||
editWorker(this.form).then((res) => { |
|||
this.submitLoading = false; |
|||
if (res.success) { |
|||
this.$Message.success("操作成功"); |
|||
this.$emit("on-submit", true); |
|||
this.visible = false; |
|||
} |
|||
}); |
|||
} else { |
|||
// 添加 |
|||
this.submitLoading = true; |
|||
addWorker(this.form).then((res) => { |
|||
this.submitLoading = false; |
|||
if (res.success) { |
|||
this.$Message.success("操作成功"); |
|||
this.$emit("on-submit", true); |
|||
this.visible = false; |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
setCurrentValue(value) { |
|||
if (value === this.visible) { |
|||
return; |
|||
} |
|||
if (this.type == "1") { |
|||
this.title = "修改信息"; |
|||
this.maxHeight = |
|||
Number(document.documentElement.clientHeight - 121) + "px"; |
|||
} else if (this.type == "2") { |
|||
this.title = "新建信息"; |
|||
this.maxHeight = |
|||
Number(document.documentElement.clientHeight - 121) + "px"; |
|||
} else { |
|||
this.title = "信息详情"; |
|||
this.maxHeight = "100%"; |
|||
} |
|||
// 清空数据 |
|||
this.$refs.form.resetFields(); |
|||
if (this.type == "0" || this.type == "1") { |
|||
// 密码强度 |
|||
// 回显数据 |
|||
let data = this.data; |
|||
if (data.workerStatus == "1") { |
|||
this.passColor = "#52c41a"; |
|||
this.statusName = "可抢单"; |
|||
} else if (data.workerStatus == "2") { |
|||
this.passColor = "#faad14"; |
|||
this.statusName = "不可接单"; |
|||
} else if (data.workerStatus == "3") { |
|||
this.passColor = "#ed3f14"; |
|||
this.statusName = "已禁用"; |
|||
} |
|||
// 角色 |
|||
let selectCompanyIds = []; |
|||
selectCompanyIds = data.ownerCompany.split(","); |
|||
data.ownerCompany = selectCompanyIds; |
|||
// 商圈 |
|||
this.$refs.regionTree.setData(data.region, data.regionTitle); |
|||
// 回显 |
|||
this.form = data; |
|||
} else { |
|||
this.form = { |
|||
type: 0, |
|||
signPerson: "2", |
|||
}; |
|||
} |
|||
this.visible = value; |
|||
}, |
|||
}, |
|||
watch: { |
|||
value(val) { |
|||
this.setCurrentValue(val); |
|||
}, |
|||
visible(value) { |
|||
this.$emit("input", value); |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.init(); |
|||
}, |
|||
}; |
|||
import { |
|||
getAllRoleList, |
|||
addWorker, |
|||
editWorker |
|||
} from "@/api/index"; |
|||
import { |
|||
getLogiticsCompanyList |
|||
} from "@/api/app"; |
|||
import { |
|||
validateUsername, |
|||
validateMobile, |
|||
validatePassword, |
|||
} from "@/libs/validate"; |
|||
import departmentTreeChoose from "@/views/my-components/hiver/department-tree-choose"; |
|||
import uploadPicInput from "@/views/my-components/hiver/upload-pic-input"; |
|||
import SetPassword from "@/views/my-components/hiver/set-password"; |
|||
import dict from "@/views/my-components/hiver/dict"; |
|||
import regionTreeChoose from "@/views/my-components/hiver/region-tree-choose"; |
|||
export default { |
|||
name: "addEdit", |
|||
components: { |
|||
regionTreeChoose, |
|||
departmentTreeChoose, |
|||
uploadPicInput, |
|||
SetPassword, |
|||
dict, |
|||
}, |
|||
props: { |
|||
value: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
data: { |
|||
type: Object, |
|||
}, |
|||
type: { |
|||
type: String, |
|||
default: "0", |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
roleList: [], |
|||
visible: this.value, |
|||
title: "", |
|||
passColor: "", |
|||
statusName: "", |
|||
submitLoading: false, |
|||
maxHeight: 510, |
|||
form: { |
|||
signPerson: "2", |
|||
}, |
|||
formValidate: {}, |
|||
companyList: [], |
|||
companyForm: { |
|||
signCompany: "1", |
|||
}, |
|||
}; |
|||
}, |
|||
methods: { |
|||
init() { |
|||
this.getRoleList(); |
|||
this.getCompanyList(); |
|||
}, |
|||
getRoleList() { |
|||
getAllRoleList().then((res) => { |
|||
if (res.success) { |
|||
this.roleList = res.result; |
|||
} |
|||
}); |
|||
}, |
|||
getCompanyList() { |
|||
getLogiticsCompanyList(this.companyForm).then((res) => { |
|||
if (res.success) { |
|||
this.companyList = res.result; |
|||
} |
|||
}); |
|||
}, |
|||
handleSelectRegion(v) { |
|||
this.form.region = v; |
|||
}, |
|||
changePass(v, grade, strength) { |
|||
this.form.passStrength = strength; |
|||
}, |
|||
submit() { |
|||
this.$refs.form.validate((valid) => { |
|||
if (valid) { |
|||
if (this.type == "1") { |
|||
// 编辑 |
|||
this.submitLoading = true; |
|||
editWorker(this.form).then((res) => { |
|||
this.submitLoading = false; |
|||
if (res.success) { |
|||
this.$Message.success("操作成功"); |
|||
this.$emit("on-submit", true); |
|||
this.visible = false; |
|||
} |
|||
}); |
|||
} else { |
|||
// 添加 |
|||
this.submitLoading = true; |
|||
addWorker(this.form).then((res) => { |
|||
this.submitLoading = false; |
|||
if (res.success) { |
|||
this.$Message.success("操作成功"); |
|||
this.$emit("on-submit", true); |
|||
this.visible = false; |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
setCurrentValue(value) { |
|||
if (value === this.visible) { |
|||
return; |
|||
} |
|||
if (this.type == "1") { |
|||
this.title = "修改信息"; |
|||
this.maxHeight = |
|||
Number(document.documentElement.clientHeight - 121) + "px"; |
|||
} else if (this.type == "2") { |
|||
this.title = "新建信息"; |
|||
this.maxHeight = |
|||
Number(document.documentElement.clientHeight - 121) + "px"; |
|||
} else { |
|||
this.title = "信息详情"; |
|||
this.maxHeight = "100%"; |
|||
} |
|||
// 清空数据 |
|||
this.$refs.form.resetFields(); |
|||
if (this.type == "0" || this.type == "1") { |
|||
// 密码强度 |
|||
// 回显数据 |
|||
let data = this.data; |
|||
if (data.workerStatus == "1") { |
|||
this.passColor = "#52c41a"; |
|||
this.statusName = "可抢单"; |
|||
} else if (data.workerStatus == "2") { |
|||
this.passColor = "#faad14"; |
|||
this.statusName = "不可接单"; |
|||
} else if (data.workerStatus == "3") { |
|||
this.passColor = "#ed3f14"; |
|||
this.statusName = "已禁用"; |
|||
} |
|||
// 回显 |
|||
this.form = data; |
|||
} else { |
|||
this.form = { |
|||
type: 0, |
|||
signPerson: "2", |
|||
}; |
|||
} |
|||
this.visible = value; |
|||
}, |
|||
}, |
|||
watch: { |
|||
value(val) { |
|||
this.setCurrentValue(val); |
|||
}, |
|||
visible(value) { |
|||
this.$emit("input", value); |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.init(); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
@import "@/styles/drawer-common.less"; |
|||
</style> |
|||
|
|||
@import "@/styles/drawer-common.less"; |
|||
</style> |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue