<template>
<div>
<div class="search-term">
<el-form :inline="true" :model="searchInfo" class="demo-form-inline">
<el-form-item>
<el-input
placeholder="请输入账户名称"
v-model="searchInfo.keyName"
clearable
size="small"
></el-input>
</el-form-item>
<el-form-item>
<el-input
placeholder="请输入角色"
v-model="searchInfo.dictKey"
clearable
size="small"
></el-input>
</el-form-item>
<el-form-item prop="status">
<el-select
v-model="searchInfo.status"
placeholder="请选择抽佣状态"
clearable
size="small"
>
<el-option
v-for="item in statusOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="onSubmit" type="primary" size="small"
>搜 索
</el-button
>
</el-form-item>
<el-form-item>
<el-button @click="openDialog('add')" size="small">新 增</el-button>
</el-form-item>
</el-form>
</div>
<el-table :data="tableData" style="width: 100%;margin-bottom: 10px;" border>
<el-table-column prop="username" label="账户名称" align="center">
</el-table-column>
<el-table-column prop="roleName" label="角色" align="center">
</el-table-column>
<el-table-column prop="areaName" label="区域" align="center">
</el-table-column>
<!-- <el-table-column prop="status" label="是否抽佣" align="center">
<template slot-scope="scope">
<span :class="scope.row.status == 1 ? 'green' : 'red'">{{
scope.row.status == 1 ? "是" : "否"
}}</span>
</template>
</el-table-column> -->
<!-- <el-table-column prop="props" label="抽佣比例" align="center">
</el-table-column> -->
<el-table-column prop="mobile" label="手机号" align="center">
</el-table-column>
<!-- <el-table-column prop="password" label="密码" align="center">
</el-table-column> -->
<el-table-column prop="enabled" label="状态" align="center">
<template slot-scope="scope">
<span :class="scope.row.enabled == 1 ? 'green' : 'red'">{{
scope.row.enabled == 1 ? "启用" : "停用"
}}</span>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" align="center" width="200px">
<template slot-scope="scope">
<el-button
@click="editArea(scope.row)"
size="small"
type="primary"
icon="el-icon-edit"
>编辑
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="currPage"
:page-size="pageSize"
:page-sizes="[10, 20, 30, 50, 100]"
:style="{ float: 'right', padding: '20px' }"
:total="totalCount"
@current-change="handlepageChange"
@size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper"
></el-pagination>
<el-dialog
:before-close="closeDialog"
:title="dialogTitle"
:visible.sync="dialogFormVisible"
class="dialogs"
>
<el-form
:model="form"
:inline="true"
:rules="rules"
label-width="80px"
ref="areaForm"
>
<el-divider content-position="left">基本信息</el-divider>
<el-form-item label="头像" prop="headImgUrl">
<el-upload
class="avatar-uploader"
:action="`${path}/fileUploadAndDownload/upload`"
list-type="picture-card"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="form.headImgUrl" :src="form.headImgUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="角色" prop="roleId">
<el-select v-model="form.roleId" placeholder="请选择角色" size="small" clearable>
<el-option
v-for="item in roleOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="账户名称" prop="username">
<el-input
autocomplete="off"
v-model="form.username"
size="small"
placeholder="请输入账户名称"
clearable
></el-input>
</el-form-item>
<!-- <el-form-item label="性别" prop="sex">-->
<!-- <el-select v-model="form.sex" placeholder="请选择性别" size="small" clearable>-->
<!-- <el-option-->
<!-- v-for="item in sexOptions"-->
<!-- :key="item.value"-->
<!-- :label="item.label"-->
<!-- :value="item.value"-->
<!-- >-->
<!-- </el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label="性别" prop="sex">
<el-radio-group v-model="form.sex">
<el-radio :label="1">男</el-radio>
<el-radio :label="0">女</el-radio>
</el-radio-group>
</el-form-item>
<el-divider content-position="left">地址信息</el-divider>
<el-form-item label="区域" prop="areaId">
<!-- <el-select
v-model="form.areaId"
placeholder="请选择区域"
size="small"
clearable
>
<el-option
v-for="item in statusOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select> -->
<el-cascader :options="areaOptions" v-model="form.areaId" :props="props"></el-cascader>
</el-form-item>
<el-form-item label="详细地址" prop="address">
<el-input
autocomplete="off"
v-model="form.address"
size="small"
placeholder="详细地址"
clearable
></el-input>
</el-form-item>
<el-form-item label="手机号" prop="mobile">
<el-input
autocomplete="off"
v-model="form.mobile"
size="small"
placeholder="请输入手机号"
clearable
></el-input>
</el-form-item>
<el-divider content-position="left" v-if="form.roleId === 3">抽佣信息</el-divider>
<el-form-item label="是否抽佣" prop="commissionStatus" v-if="form.roleId === 3">
<el-select v-model="form.commissionStatus" placeholder="请选择" size="small" clearable>
<el-option
v-for="item in statusOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="抽佣比例" prop="commissionRatio" v-if="form.commissionStatus === 1">
<el-input placeholder="抽佣比例" v-model="form.commissionRatio" size="small" clearable>
<template slot="append">%</template>
</el-input>
</el-form-item>
</el-form>
<div class="dialog-footer" slot="footer">
<el-button @click="closeDialog" size="small">取 消</el-button>
<el-button @click="enterDialog" type="primary" size="small"
>确 定
</el-button
>
</div>
</el-dialog>
</div>
</template>
<script>
// 获取列表内容封装在mixins内部 getTableData方法 初始化已封装完成 条件搜索时候 请把条件安好后台定制的结构体字段 放到 this.searchInfo 中即可实现条件搜索
import {mapGetters} from "vuex";
import {
loadChildData,
getAreaList,
} from "@/api/api";
import {addUser, editUser, userDetail, userList} from "@/api/account";
import infoList from "@/components/mixins/infoList";
export default {
name: "account",
mixins: [infoList],
data() {
const checkPassword = (rule, value, callback) => {
if (value.length < 6 || value.length > 20) {
return callback(new Error("请输入6~20个字符"));
} else {
callback();
}
};
const checkPhone = (rule, value, callback) => {
const reg = /^1[3456789]\d{9}$/;
if (!reg.test(value)) {
callback(new Error("请输入正确的手机号码"));
} else {
callback();
}
};
let _self = this
return {
areaOptions:[],
props: {
label: 'name',
value: 'areaId',
lazy: true,//设置lazyLoad，必须配合lazy：true
checkStrictly: true,
async lazyLoad(node, resolve) { // 区域树懒加载的方法
console.log(node)
const { data } = node;
console.log(data)
const temp = await _self.getSta(data.areaId);
console.log(temp)
// for (const item of temp) {
// item.leaf = (item.level === 'city');
// }
resolve(temp);
}
},
path: process.env.VUE_APP_BASE_API,
sexOptions: [
{
value: 0,
label: "女",
},
{
value: 1,
label: "男",
},
],
statusOptions: [
{
value: 0,
label: "否",
},
{
value: 1,
label: "是",
},
],
roleOptions: [
{
value: 3,
label: "机构",
},
{
value: 4,
label: "学校",
},
{
value: 5,
label: "教育局",
},
{
value: 2,
label: "管理员",
},
],
listApi: userList,
dialogFormVisible: false,
dialogTitle: "新增账号",
form: {},
type: "",
rules: {
username: [
{required: true, message: "请输入账户名称", trigger: "blur"},
],
roleId: [{required: true, message: "请选择角色", trigger: "change"}],
areaId: [
{required: true, message: "请选择区域", trigger: "change"},
],
sex: [
{required: true, message: "请选择性别", trigger: "change"},
],
mobile: [
{required: true, message: "请输入手机号", trigger: "blur"},
{validator: checkPhone, trigger: "blur"}
],
// props: [{ required: true, message: "请输入抽佣比例", trigger: "blur" }],
password: [
{required: true, message: "请输入密码", trigger: "blur"},
{validator: checkPassword, trigger: "blur"}
],
},
};
},
computed: {
...mapGetters("user", ["userInfo", "token"]),
},
methods: {
beforeAvatarUpload() {
},
handleAvatarSuccess() {
},
async getSta(id) {
const res = await loadChildData(id)
return res.data;
},
//条件搜索前端看此方法
onSubmit() {
this.page = 1;
this.pageSize = 10;
this.getTableData();
},
initForm() {
this.$refs.areaForm.resetFields();
this.form = {
path: "",
apiGroup: "",
method: "",
description: "",
};
},
closeDialog() {
this.initForm();
this.dialogFormVisible = false;
},
openDialog(type) {
switch (type) {
case "add":
this.dialogTitle = "新增账号";
break;
case "edit":
this.dialogTitle = "编辑账号";
break;
default:
break;
}
this.type = type;
this.dialogFormVisible = true;
},
async editArea(row) {
const res = await userDetail(row.userId)
this.form = res.data;
// console.log(this.form)
this.openDialog("edit");
},
async deleteAreas(row) {
this.$confirm("此操作将永久删除该地区, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(async () => {
const res = await deleteArea(row.areaId);
if (res.statusCode === 0) {
this.$message({
type: "success",
message: "删除成功!",
});
this.getTableData();
}
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
async enterDialog() {
this.$refs.areaForm.validate(async (valid) => {
if (valid) {
switch (this.type) {
case "add": {
// console.log(this.form)
const {username, roleId, sex, areaId, commissionStatus, commissionRatio, mobile, remarks, headImgUrl, address} = this.form
const res = await addUser({
username,
roleId,
sex,
areaId,
commissionStatus,
commissionRatio,
mobile,
remarks,
headImgUrl,
address
});
if (res.statusCode === 0) {
this.$message({
type: "success",
message: "添加成功",
showClose: true,
});
}
this.getTableData();
this.closeDialog();
}
break;
case "edit": {
{
}
const res = await editUser(this.form);
if (res.statusCode === 0) {
this.$message({
type: "success",
message: "编辑成功",
showClose: true,
});
}
this.getTableData();
this.closeDialog();
}
break;
default: {
this.$message({
type: "error",
message: "未知操作",
showClose: true,
});
}
break;
}
}
});
},
//文件上传
checkFile(file) {
this.fullscreenLoading = true;
const isJPG = file.type === "image/jpeg";
const isPng = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG && !isPng) {
this.$message.error("上传头像图片只能是 JPG或png 格式!");
this.fullscreenLoading = false;
}
if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!");
this.fullscreenLoading = false;
}
return (isPng || isJPG) && isLt2M;
},
uploadSuccess(res) {
this.fullscreenLoading = false;
if (res.code == 0) {
this.$message({
type: "success",
message: "上传成功",
});
if (res.code == 0) {
this.getTableData();
}
} else {
this.$message({
type: "warning",
message: res.msg,
});
}
},
uploadError() {
this.$message({
type: "error",
message: "上传失败",
});
this.fullscreenLoading = false;
},
},
async created() {
this.getTableData();
const res = await getAreaList()
this.areaOptions = res.data
},
};
</script>
<style scoped lang="scss">
.green {
color: #67c23a;
}
.red {
color: #f56c6c;
}
.button-box {
// padding: 10px 20px;
.el-button {
float: right;
}
}
.el-tag--mini {
margin-left: 5px;
}
.dialogs {
::v-deep .el-input-group--append .el-input__inner {
width: 170px !important;
}
::v-deep .el-dialog__body {
padding: 15px 20px 10px 20px;
}
::v-deep .el-input__inner {
width: 225px;
}
::v-deep .el-textarea__inner {
width: 225px;
}
.dialog-footer {
text-align: center;
}
::v-deep .el-input-number .el-input__inner {
width: 130px;
}
}
.warning {
color: #dc143c;
}
</style>
<template>
<div class="wrap custom-table-container">
<BasicTable
ref="basicTable"
:columns="columns"
:api="dataApi"
@handle-click="handleClick"
useSearchForm
selection
:handleBtns="handleBtns"
:formConfig="formConfig"
@resetSearchInfo="handleReset"
@handleMultipleSelection="multipleSelection = $event"
>
<template #action="{ record }">
<el-dropdown @command="handleClick($event, record)" trigger="click">
<el-button type="primary" class="el-option-table-btn">
<i class="el-icon-setting el-icon--left"></i>
操作
<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="1">上传</el-dropdown-item>
<el-dropdown-item :command="2">下载</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</BasicTable>
<!-- 上传弹窗 -->
<el-dialog
:visible.sync="showModalUpload"
v-if="showModalUpload"
:title="title"
width="60%"
top="10vh"
center
:close-on-click-modal="false"
>
<!-- <el-form
:model="formData"
ref="ruleForm"
label-width="120px"
class="demo-ruleForm"
>
<el-form-item label="订单号" prop="orderno" v-if="title != '批量上传'">
<template>
<span>{{ formData.orderno }}</span>
</template>
</el-form-item>
<el-form-item label="上传文件" prop="attachmentPath">
<el-row>
<el-col :span="8">
<el-upload
class="upload-demo hastip updatebtn"
action
:on-exceed="handleExceed"
:before-upload="beforeUpload"
:http-request="UploadSubmit"
:on-remove="remove"
:limit="1"
:file-list="saveFileList"
>
<el-button type="primary" size="mini">
选择文件
<vab-icon icon="upload-cloud-2-line" />
</el-button>
</el-upload>
</el-col>
<el-col :span="6">
{{
saveFileList.length == 1
? saveFileList[0].name
: '未选择任何文件'
}}
</el-col>
</el-row>
</el-form-item>
</el-form> -->
<div id="printTest" style="width: 720px; margin: 0 auto">
<el-form
:model="dynamicValidateForm"
:rules="rules"
ref="dynamicValidateForm"
label-width="auto"
>
<el-row>
<el-button type="primary" @click="handleAdd">+</el-button>
</el-row>
<el-form-item
prop="email"
label="邮箱"
:rules="[
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{
type: 'email',
message: '请输入正确的邮箱地址',
trigger: ['blur', 'change'],
},
]"
>
<el-input v-model="dynamicValidateForm.email"></el-input>
</el-form-item>
<el-table
:data="dynamicValidateForm.domains"
tooltip-effect="dark"
size="small"
>
<template>
<el-table-column label="名称" align="center">
<template slot-scope="scope">
<el-form-item
:prop="`domains.${scope.$index}.name`"
:rules="{
required: true,
message: '名称不能为空',
trigger: 'blur',
}"
>
{{ scope.$index }}
<el-input
v-model="dynamicValidateForm.domains[scope.$index].name"
></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button
@click="handleDelete(scope.$index)"
type="text"
size="small"
>
移除
</el-button>
</template>
</el-table-column>
</template>
</el-table>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="close">
<vab-icon icon="close-circle-line" />
取消
</el-button>
<el-button type="primary" @click="submitForm('dynamicValidateForm')">
<vab-icon icon="save-3-line" />
提交
</el-button>
<el-button type="primary" v-print="'#printTest'">打印</el-button>
<el-button @click="resetBtn">重置</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import columns from './columns'
import editorBar from '@/lib/WangEditor'
import { getUserList } from '@/api/system/userManagement'
import productInfo from './components/productInfo.vue'
import { StatusList } from '@/api/dress/orderManage/customizedOrder'
import { SaveUploadFile } from '@/api/user'
export default {
mixins: [columns],
name: 'CustomizedOrder',
components: { editorBar, productInfo },
data() {
return {
userList: [],
dataApi: StatusList,
drawerVisible: false,
multipleSelection: [],
showModalUpload: false,
formData: {},
title: '文件上传',
saveFileList: [],
keys: 0,
dynamicValidateForm: {
email: '',
domains: [],
},
personsOptions: [
{
label: '张三',
value: 1,
},
{
label: '李四',
value: 2,
},
],
rules: {
requireTime: [
{ required: true, message: '请输入要求时间', trigger: 'blur' },
],
},
}
},
computed: {
ids() {
let ids = []
ids = this.multipleSelection.map((i) => {
return i.id
})
return ids
},
},
watch: {
multipleSelection: {
handler(newVal, oldVal) {
if (newVal.length > 0) {
this.handleBtns.map((i, idx) => {
if (i.btnType === 2 || i.btnType === 3 || i.btnType === 4) {
this.$set(this.handleBtns[idx], 'disabled', false)
}
})
} else {
this.handleBtns.map((i, idx) => {
if (i.btnType === 2 || i.btnType === 3 || i.btnType === 4) {
this.$set(this.handleBtns[idx], 'disabled', true)
}
})
}
},
deep: true,
immediate: true,
},
},
created() {
this.initData()
},
mounted() {
this.handleReset()
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
console.log(valid)
if (valid) {
alert('submit!')
} else {
console.log('error submit!!')
return false
}
})
},
handleAdd() {
this.keys++
this.dynamicValidateForm.domains.push({
name: '',
key: Date.now(),
})
console.log(this.dynamicValidateForm)
this.$forceUpdate()
// this.dynamicValidateForm.domains.push(row)
},
handleDelete(index) {
this.dynamicValidateForm.domains.splice(index, 1)
},
fetchData() {
this.$refs['basicTable'].getData()
},
filterColors(val) {
switch (val) {
case 1:
return 'color1'
case 2:
return 'color2'
case 3:
return 'color3'
case 4:
return 'color4'
case 5:
return 'color5'
default:
break
}
},
close() {
this.showModalUpload = false
},
handleExceed(files, fileList) {
// 上传文件个数超过定义的数量
this.$message.error(`当前限制选择 1 个文件，请删除后继续上传`)
},
beforeUpload(file) {
// 上传文件之前的钩子
//判断文件格式
let fileLength = file.name.split('.')
let hz = fileLength[fileLength.length - 1]
console.log(hz)
if (hz != 'zip') {
this.$message.error(`文件格式不正确!`)
return false
}
},
async UploadSubmit(item) {
// 提交上传接口
// console.log(item)
let fileObj = item.file
const form = new FormData() // FormData 对象
form.append('file', fileObj) // 文件对象 'file'是后台接收的参数名
const res = await SaveUploadFile(form)
console.log(res)
if (res.statuscode == 0) {
this.saveFileList = []
this.saveFileList.push({
name: res.data.filename,
url: res.data.filepath,
systemattachmenturl: res.data.filepath,
systemattachmentname: res.data.filename,
})
this.$baseMessage(
'上传成功',
'success',
false,
'vab-hey-message-success'
)
} else {
this.$baseMessage(
res.errormessage,
'error',
false,
'vab-hey-message-error'
)
}
},
remove(files, fileList) {
this.resetBtn()
},
resetBtn() {
this.saveFileList = []
},
async initData() {
try {
let { data } = await getUserList({ isOn: true })
this.userList = data.map((m) => {
m.label = m.username
m.value = m.id
return m
})
for (var r in this.formConfig.schemas) {
if (this.formConfig.schemas[r].field == 'creatorIds') {
this.formConfig.schemas[r].componentProps.options = this.userList
} else if (this.formConfig.schemas[r].field == 'operationType') {
this.formConfig.schemas[r].componentProps.options = this.typeOptions
} else if (this.formConfig.schemas[r].field == 'receiptStatus') {
this.formConfig.schemas[r].componentProps.options =
this.statusOptions
}
}
} catch (error) {
console.log(error)
}
},
handleReset() {
// 条件重置
let that = this
that.$nextTick(() => {
that.$refs['basicTable'].$refs['searchForm'].formModel.beginTime = ''
that.$refs['basicTable'].$refs['searchForm'].formModel.endTime = ''
that.$refs['basicTable'].$refs['searchForm'].formModel.timer = []
})
},
formReset() {
this.saveFileList = []
this.formData = {
orderProductIds: '',
orderno: '',
attachmentPath: '',
}
},
// 点击操作
handleClick(btnType, row) {
switch (btnType) {
case 1: //上传
this.formReset()
this.showModalUpload = true
default:
break
}
},
saveFactoryAttachment() {
this.saveFileList.length > 0
? (this.formData.attachmentPath = this.saveFileList[0].url)
: (this.formData.attachmentPath = '')
if (this.saveFileList.length !== 1) {
this.$alert('请上传附件', '信息提示', {
confirmButtonText: '是',
type: 'error',
})
return false
}
console.log('hhhh', this.formData)
},
},
}
</script>
<style lang='scss' scoped>
.color1 {
background-color: #409eff;
border-color: #409eff;
}
.color2 {
background-color: #e6a23c;
border-color: #e6a23c;
}
.color3 {
background-color: #67c23a;
border-color: #67c23a;
}
.color4 {
background-color: #909399;
border-color: #909399;
}
.color5 {
background-color: #f56c6c;
border-color: #f56c6c;
}
.active {
color: #f56c6c;
}
.disActive {
color: #67c23a;
}
</style>
扫一扫
12-28
526
526
04-13
158
158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
