提交 ffd5ed56 authored 作者: 黄志强's avatar 黄志强

修改

上级 125a54c7
let baseUrl = "http://192.168.1.12:8289"; // 120.55.57.35 localhost 8289 let baseUrl = "http://192.168.1.117:8289"; // 120.55.57.35 localhost 8289
let env = process.env.VUE_APP_TITLE === 'alpha' ? 'alpha' : 'production'; let env = process.env.VUE_APP_TITLE === 'alpha' ? 'alpha' : 'production';
switch (env) { switch (env) {
case 'production': case 'production':
// baseUrl = "http://192.168.1.248:8090"; // 测试环境 // baseUrl = "http://192.168.1.248:8090"; // 测试环境
baseUrl = "http://192.168.1.12:8289"; // 测试环境 baseUrl = "http://192.168.1.117:8289"; // 测试环境
break; break;
case 'alpha': case 'alpha':
// baseUrl = "https://workbook.zjtys.com.cn"; // 阿里云环境 // baseUrl = "https://workbook.zjtys.com.cn"; // 阿里云环境
baseUrl = "http://192.168.1.12:8289"; // 阿里云环境 baseUrl = "http://192.168.1.117:8289"; // 阿里云环境
break; break;
} }
// https://workbook.zjtys.com.cn:8289 // https://workbook.zjtys.com.cn:8289
......
<!-- 分页组件 -->
<template>
<div class='pagination'>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-size="100"
layout="prev, pager, next, jumper"
:total="1000">
</el-pagination>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
name: "PaginationComponent",
//import引入的组件需要注入到对象中才能使用
components: {},
data () {
//这里存放数据
return {
// currentPage: 1
};
},
props: {
// 避免直接改变prop属性
'currentPage': {
required: false,
default: 1
},
'total': {
required: false,
default: 0
},
'limit': {
required: false,
default: 10
},
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {
// currentPage(val) {
// console.log(val)
// // 改变这个值并不会触发 handleCurrentChange
// if (typeof val === "number") {
// console.log('prop currentPage!!!', val);
// this.currentPage = val;
// }
// },
},
//方法集合
methods: {
// 当前页变化
handleCurrentChange(val) {
this.$emit("handleCurrentChange", val);
},
// size变化
handleSizeChange(val) {
this.currentPage = 1;
this.$emit('handleSizeChange', val);
},
},
//生命周期 - 创建完成(可以访问当前this实例)
created () {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
.pagination {
margin: 20px 0;
text-align: center;
}
</style>
<!-- 任务查看列表 -->
<template>
<div class='taskTable'>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
name: "taskTable",
//import引入的组件需要注入到对象中才能使用
components: {},
data () {
//这里存放数据
return {
tableData: []
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {},
//生命周期 - 创建完成(可以访问当前this实例)
created () {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
</style>
<!-- ue富文本编辑器 -->
<template>
<div class=''>
<script id="editor" type="text/plain"></script>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
name: "ue",
//import引入的组件需要注入到对象中才能使用
components: {},
data () {
//这里存放数据
return {
editor: null
};
},
props: {
defaultMsg: {
type: String
},
config: {
type: Object
}
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
getUEContent() { // 获取内容方法
return this.editor.getContent()
}
},
//生命周期 - 创建完成(可以访问当前this实例)
created () {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
const _this = this;
this.editor = UE.getEditor('editor', this.config); // 初始化UE
this.editor.addListener("ready", function () {
_this.editor.setContent(_this.defaultMsg) // 确保UE加载完成后,放入内容。
});
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
this.editor.destroy()
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
</style>
<!-- 新增任务 -->
<template>
<div class='addTask'>
<div>
<el-form :model="taskForm" :rules="rules" ref="taskForm" label-width="120px" class="demo-ruleForm">
<el-row :gutter="10">
<el-col :span="8">
<el-form-item label="任务名称" prop="title">
<el-input v-model="taskForm.title"></el-input>
</el-form-item>
<!--<el-form-item label="小组名称" prop="taskGroupName">-->
<!--<el-input v-model="taskForm.taskGroupName"></el-input>-->
<!--</el-form-item>-->
<el-form-item label="组长" prop="executor">
<el-select style="width: 100%;" v-model="taskForm.executor" placeholder="请选择组长">
<el-option
v-for="item in leaderOptions"
:key="item.id"
:label="item.username"
:value="item.id">
<span style="display: inline-block;width: 70px;">{{item.username}}</span>
<span>({{personStatusName(item.status)}})</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="发布者">
<span>{{announcer}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="任务开始时间" prop="stateTime">
<el-date-picker :editable="false" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期" v-model="taskForm.stateTime" style="width: 100%;"></el-date-picker>
</el-form-item>
<el-form-item label="组员">
<!--prop="crewList"-->
<el-select style="width: 100%;" v-model="taskForm.crewList" multiple placeholder="请选择组员">
<el-option
v-for="item in memberOptions"
:key="item.id"
:label="item.username"
:value="item.id">
<span style="display: inline-block;width: 70px;">{{item.username}}</span>
<span>({{personStatusName(item.status)}})</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="预计完成时间" prop="completeTime">
<el-date-picker :editable="false" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期" v-model="taskForm.completeTime" style="width: 100%;"></el-date-picker>
</el-form-item>
<el-form-item label="任务量(天)" prop="workload">
<el-input onkeyup="this.value=this.value.replace(/[^\d.]/g,'')" v-model="taskForm.workload"></el-input>
</el-form-item>
</el-col>
</el-row>
<div style="padding: 10px 35px;">
<div style="padding: 10px 0px;font-size: 14px;">任务内容</div>
<editor-bar v-model="content" :isClear="isClear" @change="change"></editor-bar>
</div>
<div class="upload-container">
<div class="upload-file" style="margin-left: 35px;">
<el-upload
class="upload-demo"
ref="upload"
action="https://jsonplaceholder.typicode.com/posts/"
:http-request="handleChange"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:before-upload="beforeAvatarUpload"
:file-list="fileList"
:auto-load="false"
:limit="5">
<el-button size="small" @click="submitUpload">添加附件</el-button>
<!--<button>添加附件</button>-->
<div slot="tip">最多只能上传5个文件,否则请上传压缩包!</div>
</el-upload>
</div>
</div>
</el-form>
</div>
<div style="text-align: center;margin-top: 30px;">
<el-button type="primary" @click="submitForm('taskForm','unpublished')">保存</el-button>
<el-button style="margin-left: 50px;margin-right: 40px;" type="primary" @click="submitForm('taskForm', 'ongoing')">发布</el-button>
<!--<el-button @click="resetForm('taskForm')">重置</el-button>-->
</div>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
import EditorBar from '../components/taskEditer'
export default {
name: "AddTask",
//import引入的组件需要注入到对象中才能使用
components: { EditorBar },
data () {
let stateTimeVal = (rule, value, callback) => {
if (!value) {
return callback(new Error('任务开始时间不能为空'));
}
if (this.taskForm.completeTime !== '') {
if (new Date(value).getTime() > new Date(this.taskForm.completeTime).getTime()) {
callback(new Error('任务开始时间不能超过预计完成时间'));
} else {
callback();
}
} else {
callback();
}
};
let completeVal = (rule, value, callback) => {
if (!value) {
return callback(new Error('预计完成时间为空'));
}
if (this.taskForm.stateTime !== '') {
if (new Date(value).getTime() < new Date(this.taskForm.stateTime).getTime()) {
callback(new Error('预计完成时间不能小于任务开始时间'));
} else {
callback();
}
} else {
callback();
}
};
//这里存放数据
return {
taskForm: {
title: '',
publisher: '',
stateTime: '',
completeTime: '',
workload: '',
executor: '',
crewList: [],
attachment: [],
pworkload: 1,
status: '',
workCoefficient: 0,
workloadCount: 1
},
announcer: '',
rules: {
title: [
{ required: true, message: '请输入任务名称', trigger: 'blur' },
{ max: 30, message: '长度在 30 个字符之内', trigger: 'blur' }
],
stateTime: [
{ required: true, validator: stateTimeVal, trigger: 'blur' },
// { type: 'string', required: true, message: '请选择任务开始时间', trigger: 'change' }
],
completeTime: [
{ required: true, validator: completeVal, trigger: 'blur' }
// { type: 'string', required: true, message: '请选择预计完成时间', trigger: 'change' }
],
executor: [
{ required: true, message: '请选择组长', trigger: 'change' }
],
crewList: [
{ type: 'array', required: true, message: '请选择组员', trigger: 'change' },
],
workload: [
{ required: true, message: '请输入任务量', trigger: 'blur' },
{ max: 4, message: '长度在 4 个字符之内', trigger: 'blur' }
]
},
leaderOptions: [],
memberOptions: [],
content: '',
isClear: false,
fileList: [], // 文件列表
attachmentsArr: [], // 存储多个附件对象
userLoginData: ''
};
},
//监听属性 类似于data概念
computed: {
},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
getUserById(val) {
this.$axios.getUserById(val).then((res) => {
console.log(res)
if (res.request.status === 200) {
if (JSON.stringify(this.$store.getters.getSuperior.superior) !== '{}' && JSON.stringify(this.$store.getters.getSuperior.superior) !== undefined) {
this.taskForm.title = this.$store.getters.getSuperior.superior.title;
}
if (res.data.length === 0 && (JSON.stringify(this.$store.getters.getSuperior.superior) !== '{}' && JSON.stringify(this.$store.getters.getSuperior.superior) !== undefined)) {
let data = this.$store.getters.getSuperior.superior.crewList;
if (data.findIndex(item => item.id === this.userLoginData.id) > -1) {
this.leaderOptions = data;
this.memberOptions = data;
} else {
data.push(JSON.parse(JSON.stringify(this.userLoginData)));
console.log(data)
// let data2 = Array.from(new Set(data));
let data2 = []
let obj = {};
for (let i = 0; i < data.length; i++) {
if (!obj[data[i].id]) {
data2.push(data[i]);
obj[data[i].id] = true;
}
}
this.leaderOptions = data2;
this.memberOptions = data2;
}
} else if (res.data.length > 0 && (JSON.stringify(this.$store.getters.getSuperior.superior) === '{}' || JSON.stringify(this.$store.getters.getSuperior.superior) === undefined)) {
let data = res.data;
if (data.findIndex(item => item.id === this.userLoginData.id) > -1) {
this.leaderOptions = data;
this.memberOptions = data;
} else {
data.push(JSON.parse(JSON.stringify(this.userLoginData)));
// let data2 = Array.from(new Set(data));
let data2 = []
let obj = {};
for (let i = 0; i < data.length; i++) {
if (!obj[data[i].id]) {
data2.push(data[i]);
obj[data[i].id] = true;
}
}
this.leaderOptions = data2;
this.memberOptions = data2;
}
} else if (res.data.length > 0 && (JSON.stringify(this.$store.getters.getSuperior.superior) !== '{}' && JSON.stringify(this.$store.getters.getSuperior.superior) !== undefined)) {
let arr1 = res.data;
let arr2 = this.$store.getters.getSuperior.superior.crewList;
arr1.push(...arr2);
if (arr1.findIndex(item => item.id === this.userLoginData.id) > -1) {
// let arr3 = Array.from(new Set(arr1));
// let arr3 = [...new Set(arr1)];
let arr3 = []
let obj = {};
for (let i = 0; i < arr1.length; i++) {
if (!obj[arr1[i].id]) {
arr3.push(arr1[i]);
obj[arr1[i].id] = true;
}
}
this.leaderOptions = arr3;
this.memberOptions = arr3;
} else {
arr1.push(JSON.parse(JSON.stringify(this.userLoginData)));
// let arr3 = Array.from(new Set(arr1));
// let arr3 = [...new Set(arr1)]
let arr3 = []
let obj = {};
for (let i = 0; i < arr1.length; i++) {
if (!obj[arr1[i].id]) {
arr3.push(arr1[i]);
obj[arr1[i].id] = true;
}
}
this.leaderOptions = arr3;
this.memberOptions = arr3;
}
}
}
})
},
change(val) {
// console.log(val)
},
submitForm(formName, sta) {
// alert(this.content);
this.$refs[formName].validate((valid) => {
if (valid) {
// console.log(JSON.stringify(this.$store.getters.getSuperior.superior));
if (JSON.stringify(this.$store.getters.getSuperior.superior) !== '{}' && JSON.stringify(this.$store.getters.getSuperior.superior) !== undefined) {
if (new Date(this.taskForm.stateTime).getTime() < new Date(this.$store.getters.getSuperior.superior.stateTime).getTime()) {
this.$message({
message: `当前任务开始时间不能早于${this.$store.getters.getSuperior.superior.stateTime}`,
type: 'warning'
});
return false;
}
if (new Date(this.taskForm.completeTime).getTime() > new Date(this.$store.getters.getSuperior.superior.completeTime).getTime()) {
this.$message({
message: `当前预计完成时间不能超过${this.$store.getters.getSuperior.superior.completeTime}`,
type: 'warning'
});
return false;
}
this.$axios.putFindWorkload(this.$store.getters.getSuperior.superior.id).then((res) => {
console.log(res)
if (res.status === 200) {
if (parseInt(this.taskForm.workload) > parseInt(res.data)) {
this.$alert(`当前总任务量为${res.data},请重新评估任务量`, '任务量提示', {
confirmButtonText: '确定'});
return false;
} else {
this.postTaskData(formName, sta);
}
}
})
} else {
this.postTaskData(formName, sta);
}
} else {
console.log('error submit!!');
return false;
}
});
},
postTaskData(formName, sta) {
console.log(this.taskForm);
let data = JSON.parse(JSON.stringify(this.taskForm));
let arr = [];
this.attachmentsArr.forEach((v, i) => {
arr.push(v.id);
})
console.log(arr)
if (new Date(data.stateTime).getTime() > new Date(data.completeTime).getTime()) {
this.$message({
message: '任务开始时间不能大于预计完成时间',
type: 'warning'
});
return false;
}
data.workCoefficient = 0;
data.content = this.content;
data.pworkload = 1;
data.attachment = arr;
data.status = sta;
data.endTime = '';
data.workload = Number(data.workload);
data.workloadCount = 1;
if (JSON.stringify(this.$store.getters.getSuperior.superior) !== '{}' && JSON.stringify(this.$store.getters.getSuperior.superior) !== undefined) {
data.superiorId = this.$store.getters.getSuperior.superior.id;
}
let obj = {
"remarks": "",
"userId": this.userLoginData.id,
'work': data
}
this.$axios.postAddTask(obj).then((res) => {
console.log(res)
if (res.request.status === 200) {
if (res.data.id !== undefined) {
this.$store.commit('changeSuperior', {
superior: {}
})
let tip;
if(sta === 'going') {
tip = '新增任务';
} else {
tip = '保存任务';
}
this.$message({
message: tip + '成功!',
type: 'success'
});
this.$refs[formName].resetFields();
this.content = '';
this.$router.push({name: 'viewTask'});
}
}
})
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
submitUpload() {
// this.$refs.uploaad.submit();
},
handleExceed (files, fileList) { // 最多上传5个附件,多出时提示
this.$message.warning(`最多只能上传 5 个文件`);
},
handleRemove (file, fileList) { // 删除附件
let arr = JSON.parse(JSON.stringify(this.attachmentsArr));
arr.splice(arr.findIndex(item => item.name === file.name), 1);
this.attachmentsArr = arr;
console.log(this.attachmentsArr);
// for (let i = 0; i < arr; i++) {
// if (file.name === this.attachmentsArr[a].name) {
// console.log(22222)
// this.attachmentsArr.splice(a, 1);
// }
// }
},
beforeAvatarUpload(file) { // 文件上传大小限制
let isLt2M = file.size / 1024 / 1024 < 300;
if (!isLt2M) {
this.$message({
message: '文件上传大小不能超过300M',
type: 'warning'
})
}
return isLt2M
},
handleChange (files) { // 文件上传
let Obj = {
"fileId": "",
"name": "",
"suffix": "",
"time": "",
"type": "",
"uploader": ""
}
// console.log(files)
let form = new FormData();
form.append('file', files.file);
this.$axios.postUpload(form).then(res => {
console.log(res)
if (res.status === 200) {
Obj.fileId = res.data.id;
this.$message({
message: '附件上传成功!',
type: 'success'
});
Obj.uploader = this.userLoginData.id;
Obj.name = files.file.name;
Obj.type = 'init';
let index = files.file.name.indexOf('.');
let s = files.file.name.substring(index + 1);
Obj.suffix = s;
let time = new Date();
let y = time.getFullYear();
let m = time.getMonth() + 1;
m = m < 10?'0' + m:m;
let d = time.getDate();
d = d < 10?'0' + d:d;
let h = time.getHours();
h = h < 10?'0' + h:h;
let mm = time.getMinutes();
mm = mm < 10?'0' + mm:mm;
let ss = time.getSeconds();
ss = ss < 10?'0' + ss:ss;
Obj.time = `${y}-${m}-${d} ${h}:${mm}:${ss}`;
// let newObj = {
// attachment: Obj
// }
console.log(Obj)
this.$axios.postAttachmentOneByOne(Obj).then((res) => {
console.log(res)
if (res.status === 200) {
let data = {
id: res.data.id,
name: Obj.name
}
this.attachmentsArr.push(data)
}
})
// this.attachmentsArr.push(Obj); // 把多个附件添加到一个数组中,留到把附件添加到所属工作中时使用
console.log(this.attachmentsArr);
}
})
},
personStatusName(val) {
let name = '';
if (val === '0') {
name = '空闲';
} else if (val === '1') {
name = '正常';
} else {
name = '忙碌';
}
return name;
}
},
//生命周期 - 创建完成(可以访问当前this实例)
created () {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
this.taskForm.stateTime = this.$common.timeYMDHMSFilter(new Date());
console.log(this.$store.getters.getLoginData.loginData)
if (this.$store.getters.getLoginData.loginData !== undefined) {
this.userLoginData = this.$store.getters.getLoginData.loginData;
} else {
this.userLoginData = JSON.parse(this.$Base64.decode(localStorage.getItem('login')));
}
this.announcer = this.userLoginData.username;
this.taskForm.publisher = this.userLoginData.id;
let that = this;
setTimeout(function () {
that.getUserById(that.userLoginData.id);
}, 200)
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
this.$store.commit('changeSuperior', {
superior: {}
})
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
.addTask{
height: 99%;
padding: 10px 30px;
/*border: 1px solid #000;*/
}
/deep/ .w-e-text-container {
border: 1px solid #ccc !important;
border-top: none !important;
/*height: 300px;*/
z-index: 10000 !important;
width: 100% !important;
height: 800px !important;
background: #ffffff !important;
color: #000 !important;
/*padding: 0.119792rem 0 0 0.234375rem;*/
/*margin: 0.208333rem auto;*/
}
</style>
<!-- 管理员设置页面 -->
<template>
<div class='adminSetting'>
<ul class="userAuthority">
<li class="person" @click="authorityClick('consumerManage')">
<div class="nameManage">用户管理</div>
</li>
<li class="department" @click="authorityClick('departmentManage')">
<div class="nameManage">部门管理</div>
</li>
<li class="authority" @click="authorityClick('authorityManage')">
<div class="nameManage">权限管理</div>
</li>
<li class="role" @click="authorityClick('roleManage')">
<div class="nameManage">角色管理</div>
</li>
<li class="params" @click="authorityClick('paramsSetting')">
<div class="nameManage">参数配置</div>
</li>
</ul>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
name: "adminSetting",
//import引入的组件需要注入到对象中才能使用
components: {},
data () {
//这里存放数据
return {};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
authorityClick(val) {
this.$router.push({name: val});
}
},
//生命周期 - 创建完成(可以访问当前this实例)
created () {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
.params{
background: url("../assets/images/xtsz.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.person{
background: url("../assets/images/xtsz.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.role{
background: url("../assets/images/xtsz.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.authority{
background: url("../assets/images/xtsz.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.department {
background: url("../assets/images/xtsz.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
</style>
<!-- 权限管理 -->
<template>
<div class='authorityManage'>
<div style="text-align: right">
<el-button type="primary" @click="addAuthority" icon="el-icon-plus">新增</el-button>
</div>
<div>
<el-table
:data="authorityData"
style="width: 100%">
<el-table-column
prop="name"
align="center"
label="权限名称">
</el-table-column>
<el-table-column
prop="description"
align="center"
label="权限描述">
</el-table-column>
<el-table-column
label="操作"
align="center">
<template slot-scope="scope">
<el-button @click="editAuthority(scope.row)" size="small">编辑</el-button>
<el-button @click="deleteAuthority(scope.row)" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div>
<el-dialog title="权限" :show-close="false" :append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false" :lock-scroll="true" :visible.sync="dialogAuthorityVisible">
<div slot="title" class="header-title">
<span class="dialogHeader">{{dialogName}}</span>
<img @click="closeAuthorityDialog('authorityForm')" class="dialogHeaderClose" src="../assets/images/modal-gb.png" />
</div>
<div style="margin-top: 100px;text-align: left;">
<el-form ref="authorityForm" :rules="rules" :model="authorityForm" label-width="100px">
<el-form-item label="权限名称" prop="authorityName">
<el-input v-model="authorityForm.name"></el-input>
</el-form-item>
<el-form-item label="权限描述" prop="authorityDes">
<el-input type="textarea" v-model="authorityForm.description"></el-input>
</el-form-item>
</el-form>
<div style="text-align: center;margin-top: 50px;">
<el-button type="primary" @click="submitAuthorityDialog('authorityForm')">确定</el-button>
<el-button type="primary" @click="closeAuthorityDialog('authorityForm')">取消</el-button>
</div>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
name: "AuthorityManage",
//import引入的组件需要注入到对象中才能使用
components: {},
data () {
//这里存放数据
return {
authorityData: [
],
dialogName: '新增权限',
dialogAuthorityVisible:false,
authorityForm: {
name: '',
description: ''
},
rules:{
name: [
{ required: true, message: '请输入权限名称', trigger: 'blur' },
],
description: [
{ required: true, message: '请输入权限描述', trigger: 'blur' },
],
}
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
getAuthority() {
this.$axios.putAuthority().then((res) => {
console.log(res);
if (res.request.status === 200) {
this.authorityData = res.data;
}
})
},
addAuthority() {
this.dialogName = '新增权限';
this.dialogAuthorityVisible = true;
this.authorityForm.name = '';
this.authorityForm.description = '';
this.authorityForm.id = null;
},
editAuthority(val) {
this.dialogName = '修改权限';
this.dialogAuthorityVisible = true;
console.log(val)
this.authorityForm = val;
},
closeAuthorityDialog() {
this.authorityForm.name = '';
this.authorityForm.description = '';
this.dialogAuthorityVisible = false;
this.getAuthority();
},
submitAuthorityDialog(val) {
this.$refs[val].validate((valid) => {
if (valid) {
if (this.dialogName === '新增权限') {
this.$axios.postAddAuthority(this.authorityForm).then((res) => {
console.log(res)
if (res.request.status === 200) {
this.$message({
message: '新增权限成功!',
type: 'success'
});
this.closeAuthorityDialog();
}
})
} else {
console.log(this.authorityForm)
this.$axios.postAddAuthority(this.authorityForm).then((res) => {
console.log(res)
if (res.request.status === 200) {
this.$message({
message: '修改权限成功!',
type: 'success'
});
this.closeAuthorityDialog();
}
})
}
} else {
console.log('error submit!!');
return false;
}
});
},
deleteAuthority(val) {
console.log(val)
this.$axios.deleteAuthority(val.id).then((res) => {
console.log(res)
if (res.request.status === 200) {
this.$message({
message: '删除权限成功!',
type: 'success'
});
this.closeAuthorityDialog();
}
})
}
},
//生命周期 - 创建完成(可以访问当前this实例)
created () {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
this.getAuthority()
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
</style>
<!-- 分解任务 -->
<template>
<div class='breakDownTask'>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
name: "BreakDownTask",
//import引入的组件需要注入到对象中才能使用
components: {},
data () {
//这里存放数据
return {};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {},
//生命周期 - 创建完成(可以访问当前this实例)
created () {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
</style>
<!-- 用户管理详情 -->
<template>
<div class='consumerDetails'>
<div style="">
<el-row :gutter="20">
<el-col :span="5">
<div class="leftImg">
<img src="../assets/images/xq-tx-1.png"/>
<!--<img src="../assets/images/xq-tx-2.png"/>-->
</div>
</el-col>
<el-col :span="19">
<div>
<el-form :model="userForm" :rules="rules" ref="userForm" label-width="100px" class="demo-ruleForm">
<el-row :gutter="10">
<el-col :span="8">
<el-form-item class="first" label="姓名" prop="username">
<el-input v-model="userForm.username"></el-input>
</el-form-item>
<el-form-item class="first" label="身份证" prop="idCard">
<el-input v-model="userForm.idCard"></el-input>
</el-form-item>
<el-form-item class="first" prop="email" label="邮箱">
<el-input v-model="userForm.email"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="first" label="电话1" prop="phone1">
<el-input v-model.number="userForm.phone1" autocomplete="off"></el-input>
</el-form-item>
<el-form-item class="first" label="地址" prop="address">
<el-input v-model="userForm.address"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="first" label="电话2" prop="phone2">
<el-input v-model="userForm.phone2"></el-input>
</el-form-item>
<el-form-item class="first" label="入职时间" prop="entryTime">
<el-date-picker type="date" placeholder="选择日期" v-model="userForm.entryTime" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
</el-row>
<div class="roleDiv first" style="width: 100%;">
<el-form-item class="first" label="部门" prop="departmentIds">
<!--<el-input v-model="userForm.departmentId"></el-input>-->
<el-select v-model="userForm.departmentIds" multiple placeholder="请选择">
<el-option
v-for="item in deOptions"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item class="first" label="岗位" prop="job">
<el-input v-model="userForm.jobs"></el-input>
</el-form-item>
<el-form-item label="角色" prop="roles">
<el-select v-model="userForm.roles" @change="roleChange" multiple placeholder="请选择角色">
<el-option
v-for="item in roleList"
:key="item.id"
:label="item.name"
:disabled="item.disabled"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</div>
</el-form>
</div>
</el-col>
</el-row>
</div>
<div style="text-align: center;position: absolute;bottom: 40px;left: 45%;">
<el-button type="primary" @click="submitForm('userForm')" style="margin-right: 30px;">修改</el-button>
<el-button type="primary" @click="deleteUSer('userForm')">删除</el-button>
</div>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
name: "ConsumerDetails",
//import引入的组件需要注入到对象中才能使用
components: {},
data () {
var checkPhone = (rule, value, callback) => {
const phoneReg = /^1[3|4|5|6|7|8][0-9]{9}$/;
console.log(value)
if (value !== '') {
console.log(value)
if (phoneReg.test(value)) {
callback()
} else {
callback(new Error('电话号码格式不正确'))
}
} else {
callback()
}
};
//这里存放数据
return {
paramsData: '',
userForm:{
username: '',
phone1: '',
phone2: '',
idCard: '',
address: '',
jobs: '',
departmentId: '',
// department2: '',
// department3: '',
email: '',
entryTime: '',
roles: [],
},
rules:{
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
],
phone1: [
{required: true, validator: checkPhone, trigger: 'blur' }
],
phone2: [
{required: true, validator: checkPhone, trigger: 'blur' }
],
idCard: [
{ required: true, message: '请填写证件号码', trigger: 'blur' },
{
pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
message: '证件号码格式有误!',
trigger: 'blur'
}
],
address: [
{ required: true, message: '请输入地址', trigger: 'blur' },
],
jobs: [
{ required: true, message: '请输入岗位', trigger: 'blur' },
],
departmentId: [
{ required: true, message: '请输入部门1', trigger: 'blur' },
],
// department2: [
// { required: true, message: '请输入部门2', trigger: 'blur' },
// ],
// department3: [
// { required: true, message: '请输入部门3', trigger: 'blur' },
// ],
email: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
],
entryTime: [
{ required: true, message: '请选择入职时间', trigger: 'change' }
],
// roles: [
// { type: 'array', required: true, message: '请选择角色', trigger: 'change' },
// ],
},
roleList: [],
deOptions: []
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
getRoles() {
this.$axios.getRole().then((res) => {
console.log(res.data)
if (res.request.status === 200) {
let obj = {authorities:[],
departmentId: '',
description: "",
id: "",
isLeader: "",
name: "无"}
res.data.push(obj)
this.roleList = res.data;
}
})
},
postDepartmentList() {
// this.$axios.postDepartmentList().then((res) => {
// console.log(res)
// if (res.request.status === 200) {
// this.data = res.data;
// }
// })
this.$axios.getAllDepartment().then((res) => {
console.log(res)
if (res.request.status === 200) {
// this.data = res.data;
this.deOptions = res.data;
}
})
},
submitForm(formName) {
console.log(this.userForm)
this.$refs[formName].validate((valid) => {
if (valid) {
console.log(this.userForm)
let obj = JSON.parse(JSON.stringify(this.userForm));
console.log(obj.roles, this.roleList)
let newArr = [];
if (obj.roles.length > 0 && obj.roles[0] !== '') {
for (let i = 0; i < this.roleList.length; i++) {
for (let j = 0; j < obj.roles.length; j++) {
if(obj.roles[j] === this.roleList[i].id){
newArr.push(this.roleList[i]);
}
}
}
console.log(newArr)
obj.roles = newArr;
} else {
obj.roles =null;
}
obj.phone1 = obj.phone1 + '';
obj.phone2 = obj.phone2 + '';
console.log(obj)
this.$refs[formName].validate((valid) => {
if (valid) {
this.$axios.putUsers(obj).then((res) => {
console.log(res)
this.$message({
message: '修改用户成功!',
type: 'success'
});
this.$refs[formName].resetFields();
this.$router.push({name: 'consumerManage'});
})
} else {
console.log('error submit!!');
return false;
}
});
} else {
console.log('error submit!!');
return false;
}
});
},
deleteUSer(formName) {
this.$axios.deleteUsers(this.userForm.id).then((res) => {
console.log(res);
if (res.request.status === 200) {
this.$message({
message: '删除用户成功!',
type: 'success'
});
this.$refs[formName].resetFields();
this.$router.push({name: 'consumerManage'});
}
})
},
roleChange(val) {
console.log(val)
console.log(val[0]);
let data = JSON.parse(JSON.stringify(this.roleList));
if (val.length > 0) {
console.log(111)
if (val[0] !== '') {
data.forEach((v, i) => {
// console.log(v)
if (v.id !== '') {
v.disabled = false;
} else {
v.disabled = true;
}
})
} else {
data.forEach((v, i) => {
// console.log(v)
if (v.id !== '') {
v.disabled = true;
} else {
v.disabled = false;
}
})
}
} else {
data.forEach((v, i) =>{
v.disabled = false;
})
}
console.log(data)
this.roleList = JSON.parse(JSON.stringify(data));
}
},
//生命周期 - 创建完成(可以访问当前this实例)
created () {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
this.getRoles();
this.postDepartmentList();
let that = this;
setTimeout(function () {
console.log(that.$Base64.decode(localStorage.getItem('adminUser')))
let data = JSON.parse(that.$Base64.decode(localStorage.getItem('adminUser')));
console.log(data)
that.userForm = data;
let roles = [];
data.roles.forEach((v, i) => {
roles.push(v.id);
})
if (roles.length === 0) {
roles = [''];
that.roleChange(roles)
}
that.userForm.roles = roles;
}, 300)
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
.consumerDetails{
height: 98%;
}
.leftImg{
text-align: center;
}
.leftImg img{
width: 300px;
height: 420px;
margin-top: 40px;
}
.roleDiv /deep/ .el-select {
display: inline-block;
position: relative;
width: 100%;
}
.first {
margin-top: 50px;
}
</style>
<!-- 用户管理 -->
<template>
<div class='consumerManage'>
<div class="searchAdd">
<!--<div style="float:left;">-->
<!--<div class="div-search">-->
<!--<i class="search-icon" @click="openSearch()"></i>-->
<!--<input type="text" v-model="searchHuman" id="searchVal" placeholder="请输入" class="in-search" @keyup.enter="openSearch()"/>-->
<!--</div>-->
<!--</div>-->
<img title="列表模式" v-show="showLi === true" @click="showLi = false" src="../assets/images/listChange.png" width="40" style="cursor: pointer;float: right;"/>
<img title="网格模式" v-show="showLi === false" @click="showLi = true" src="../assets/images/liChange.png" width="40" style="cursor: pointer;float: right;"/>
<el-button @click="addUser" style="float: right;margin-right: 30px;" type="primary" icon="el-icon-plus">新增</el-button>
</div>
<div style="padding-top: 20px;clear: both;">
<ul v-show="showLi === true">
<li @click="consumerDetail(item)" class="personLi" v-for="(item, index) in personList" :key="index">
<div style="margin-top: 20px;margin-left: 10px;">
<img src="../assets/images/nyg.png">
<!--<img v-show="item.sex === 1" src="../assets/images/women.png">-->
<div class="personDetail">
<div>姓名:{{item.username}}</div>
<div>岗位:{{item.jobs}}</div>
<div>电话:{{item.phone1}}</div>
<div>入职时间:{{item.entryTime}}</div>
</div>
</div>
</li>
</ul>
<el-table
v-show="showLi === false"
:data="personList"
@row-click="openDetails"
style="width: 100%">
<el-table-column
prop="username"
align="center"
label="姓名">
</el-table-column>
<el-table-column
prop="departmentId"
align="center"
label="部门">
<template slot-scope="scope">
<span>{{findDeparts(scope.row.departmentIds)}}</span>
</template>
</el-table-column>
<el-table-column
prop="jobs"
align="center"
label="岗位">
</el-table-column>
<el-table-column
prop="phone1"
align="center"
label="电话">
</el-table-column>
<el-table-column
prop="entryTime"
align="center"
label="入职时间">
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
name: "Consumer",
//import引入的组件需要注入到对象中才能使用
components: {},
data () {
//这里存放数据
return {
searchHuman: '',
personList: [],
showLi: false,
departList: [],
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
getUser() {
this.$axios.getUser().then((res) => {
console.log(res)
this.personList = res.data;
})
},
openSearch() {
console.log(this.searchHuman)
},
jobName(val) {
console.log(val)
// return '开发工程师';
// this.$axios.getJob().then(res => { // 所有岗位
// let jname = res.data;
// for (let i = 0; i < jname.length; i++) {
// if (jname[i].id === val) {
// return jname[i].name
// }
// }
// }).catch(err => {
// console.error(err.message);
// })
},
consumerDetail(item) {
console.log(item)
console.log(this.$Base64.encode(JSON.stringify(item)));
localStorage.setItem('adminUser', this.$Base64.encode(JSON.stringify(item)));
this.$router.push({name: 'consumerDetails'});
},
addUser() {
this.$router.push({name: 'createConsumer'})
},
openDetails(val) {
// console.log(val)
localStorage.setItem('adminUser', this.$Base64.encode(JSON.stringify(val)));
this.$router.push({name: 'consumerDetails'});
},
findDeparts(val) {
// console.log(val)
// console.log(this.departList)
let name
for (let i = 0; i <this.departList.length; i++) {
for (let j = 0; j < val.length; j++) {
if (val[j] === this.departList[i].id) {
name = this.departList[i].name
}
}
}
// let ret1 = this.departList.find((value, index, arr) => {
// return value.id === val;
// })
// console.log(ret1)
return name
},
getAllDepartmentList() {
this.$axios.getAllDepartment().then((res) => {
console.log(res)
if (res.request.status === 200) {
this.departList = res.data;
}
})
},
},
//生命周期 - 创建完成(可以访问当前this实例)
created () {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
this.getAllDepartmentList();
let that = this;
setTimeout(function () {
that.getUser();
}, 300)
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
.consumerManage{
position: relative;
}
.searchAdd{
clear: both;
}
.div-search{
position: relative;
}
.in-search{
width: 250px; /*no*/
height: 36px; /*no*/
background: #ffffff;
border-radius: 20px; /*no*/
font-size: 16px; /*no*/
padding-left: 14px; /*no*/
border: 1px solid #409EFF;
}
.search-icon{
position: absolute;
background-image: url("../assets/images/search.png");
background-repeat: no-repeat;
width: 26px; /*no*/
height: 26px; /*no*/
cursor: pointer; /*no*/
right: 3px; /*no*/
top: 5px; /*no*/
}
.personLi{
width: 320px;
height: 130px;
float: left;
margin-right: 70px;
margin-left: 55px;
margin-bottom: 30px;
border: 1px solid rgba(102, 102, 102, 0.5);
cursor: pointer;
border-radius: 6px;
}
.personLi:hover{
box-shadow: 3px 5px 10px #666666;
}
.personLi img{
float: left;
width: 60px;
height: 60px;
}
.personDetail{
float: left;
margin-left: 20px;
}
.personDetail div{
height: 24px;
}
</style>
<!-- 新增用户 -->
<template>
<div class='createConsumer'>
<div style="">
<el-row :gutter="20">
<el-col :span="5">
<div class="leftImg">
<!--<el-upload-->
<!--style="margin-top: 50px;"-->
<!--ref="uploads"-->
<!--class="avatar-uploader"-->
<!--action="https://jsonplaceholder.typicode.com/posts/"-->
<!--:show-file-list="false"-->
<!--:on-change="imgPreview"-->
<!--:auto-upload="false">-->
<!--&lt;!&ndash;:before-upload="beforeAvatarUpload"&ndash;&gt;-->
<!--<img v-if="imageUrl" :src="imageUrl" class="avatar">-->
<!--<i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--</el-upload>-->
<img class="leftImgs" src="../assets/images/xq-tx-1.png"/>
</div>
</el-col>
<el-col :span="19">
<div>
<el-form :model="createForm" :rules="rules" ref="createForm" label-width="100px" class="demo-ruleForm">
<el-row :gutter="10">
<el-col :span="8">
<el-form-item class="first" label="姓名" prop="username">
<el-input v-model="createForm.username"></el-input>
</el-form-item>
<el-form-item class="first" label="身份证" prop="idCard">
<el-input v-model="createForm.idCard"></el-input>
</el-form-item>
<el-form-item class="first" prop="email" label="邮箱">
<el-input v-model="createForm.email"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="first" label="电话1" prop="phone1">
<el-input v-model.number="createForm.phone1" autocomplete="off"></el-input>
</el-form-item>
<el-form-item class="first" label="地址" prop="address">
<el-input v-model="createForm.address"></el-input>
</el-form-item>
<!--<el-form-item class="first" label="部门2" prop="department2">-->
<!--<el-input v-model="createForm.department2"></el-input>-->
<!--</el-form-item>-->
<!--<el-form-item class="first" label="入职时间" prop="entryTime">-->
<!--<el-date-picker type="date" placeholder="选择日期" v-model="createForm.entryTime" style="width: 100%;"></el-date-picker>-->
<!--</el-form-item>-->
</el-col>
<el-col :span="8">
<el-form-item class="first" label="电话2" prop="phone2">
<el-input v-model="createForm.phone2"></el-input>
</el-form-item>
<el-form-item class="first" label="入职时间" prop="entryTime">
<el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="createForm.entryTime" style="width: 100%;"></el-date-picker>
</el-form-item>
<!--<el-form-item class="first" label="部门3" prop="department3">-->
<!--<el-input v-model="createForm.department3"></el-input>-->
<!--</el-form-item>-->
</el-col>
</el-row>
<div class="roleDiv " style="width: 100%;">
<el-form-item class="first" label="部门" prop="departmentIds">
<el-select v-model="createForm.departmentIds" multiple placeholder="请选择">
<el-option
v-for="item in deOptions"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<!--<el-input v-model="createForm.department"></el-input>-->
<!--<el-select v-model="createForm.department" placeholder="请选择" collapse-tags @change="selectChange">-->
<!--<el-option :value="mineStatusValue" style="height: auto">-->
<!--&lt;!&ndash;//option展开高度太小,把height设置为auto就好啦&ndash;&gt;-->
<!--<el-tree :data="data" show-checkbox node-key="id" ref="tree" highlight-current :props="defaultProps" @check-change="handleCheckChange"></el-tree>-->
<!--</el-option>-->
<!--</el-select>-->
</el-form-item>
<el-form-item class="first" label="岗位" prop="jobs">
<el-input v-model="createForm.jobs"></el-input>
</el-form-item>
<el-form-item label="角色" prop="roles">
<el-select v-model="createForm.roles" @change="roleChange" multiple placeholder="请选择角色">
<el-option
v-for="item in roleList"
:key="item.id"
:label="item.name"
:value="item.id"
:disabled="item.disabled">
</el-option>
</el-select>
</el-form-item>
</div>
</el-form>
</div>
</el-col>
</el-row>
</div>
<div style="text-align: center;position: absolute;bottom: 40px;left: 49%;">
<el-button type="primary" @click="submitForm('createForm')" style="margin-right: 30px;">保存</el-button>
</div>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
name: "CreateConsumer",
//import引入的组件需要注入到对象中才能使用
components: {},
data () {
var checkPhone1 = (rule, value, callback) => {
const phoneReg = /^1[3|4|5|6|7|8][0-9]{9}$/;
console.log(value)
if (value !== '') {
console.log(value)
if (phoneReg.test(value)) {
callback()
} else {
callback(new Error('电话1号码格式不正确'))
}
} else {
return callback(new Error('电话1号码不能为空'))
}
};
var checkPhone2 = (rule, value, callback) => {
const phoneReg = /^1[3|4|5|6|7|8][0-9]{9}$/;
console.log(value)
if (value !== '') {
console.log(value)
if (phoneReg.test(value)) {
callback()
} else {
callback(new Error('电话2号码格式不正确'))
}
} else {
return callback(new Error('电话2号码不能为空'))
}
};
//这里存放数据
return {
imageUrl: '',
file: '',
createForm:{
username: '',
phone1: '',
phone2: '',
idCard: '',
address: '',
jobs: '',
departmentIds: [],
// department2: '',
// department3: '',
email: '',
entryTime: '',
roles: []
},
rules:{
username: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
],
phone1: [
{required: true, validator: checkPhone1, trigger: 'blur' }
],
phone2: [
{required: true, validator: checkPhone2, trigger: 'blur' }
],
idCard: [
{ required: true, message: '请填写证件号码', trigger: 'blur' },
{
pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
message: '证件号码格式有误!',
trigger: 'blur'
}
],
address: [
{ required: true, message: '请输入地址', trigger: 'blur' },
],
jobs: [
{ required: true, message: '请输入岗位', trigger: 'blur' },
],
departmentIds: [
{ type: 'array', required: true, message: '请选择部门', trigger: 'change' }
// { required: true, message: '请输入部门1', trigger: 'blur' },
],
// department2: [
// { required: true, message: '请输入部门2', trigger: 'blur' },
// ],
// department3: [
// { required: true, message: '请输入部门3', trigger: 'blur' },
// ],
email: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
],
entryTime: [
{ required: true, message: '请选择入职时间', trigger: 'change' }
],
roles: [
{ type: 'array', required: true, message: '请选择角色', trigger: 'change' },
],
},
roleList: [],
mineStatus: "",
mineStatusValue: [],
data: [],
defaultProps: {
children: "departments",
label: "name"
},
deOptions: [],
disabledRole: false
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
getRoles() {
this.$axios.getRole().then((res) => {
console.log(res.data)
if (res.request.status === 200) {
res.data.forEach((v, i) => {
v.disabled = false;
})
let obj = {authorities:[],
departmentId: '',
description: "",
id: "",
isLeader: "",
name: "无",
disabled: false}
res.data.push(obj)
this.roleList = res.data;
}
})
},
postDepartmentList() {
// this.$axios.postDepartmentList().then((res) => {
// console.log(res)
// if (res.request.status === 200) {
// this.data = res.data;
// }
// })
this.$axios.getAllDepartment().then((res) => {
console.log(res)
if (res.request.status === 200) {
// this.data = res.data;
this.deOptions = res.data;
}
})
},
imgPreview (file) {
// this.$refs.uploads.clearFiles();
console.log(file)
// 图片显示前做一下判断
const IMG_ALLOWD = ['jpeg', 'jpg', 'gif', 'png']
const imgType = file.raw.type.split('/')[1]
// 判断图片格式
if (IMG_ALLOWD.indexOf(imgType) === -1) {
this.$message.warning('上传图片格式错误')
this.imageUrl = null;
} else {
// 成功
this.file = file;
this.imageUrl = URL.createObjectURL(file.raw)
}
},
submitForm(formName) {
console.log(this.createForm)
let obj = JSON.parse(JSON.stringify(this.createForm));
console.log(obj.roles, this.roleList)
let newArr = [];
if (obj.roles.length > 0 && obj.roles[0] !== '') {
for (let i = 0; i < this.roleList.length; i++) {
for (let j = 0; j < obj.roles.length; j++) {
if(obj.roles[j] === this.roleList[i].id){
newArr.push(this.roleList[i]);
}
}
}
console.log(newArr)
obj.roles = newArr;
} else {
obj.roles =null;
}
obj.phone1 = obj.phone1 + '';
obj.phone2 = obj.phone2 + '';
console.log(obj)
this.$refs[formName].validate((valid) => {
if (valid) {
this.$axios.postUser(obj).then((res) => {
console.log(res)
this.$message({
message: '新增用户成功!',
type: 'success'
});
this.$refs[formName].resetFields();
this.$router.push({name: 'consumerManage'});
})
} else {
console.log('error submit!!');
return false;
}
});
},
selectChange(e){
var arrNew = [];
var dataLength = this.mineStatusValue.length;
var eleng = e.length;
for(let i = 0; i< dataLength ;i++){
for(let j = 0; j < eleng; j++){
if(e[j] === this.mineStatusValue[i].label){
arrNew.push(this.mineStatusValue[i])
}
}
}
this.$refs.tree.setCheckedNodes(arrNew);//设置勾选的值
},
handleCheckChange() {
let res = this.$refs.tree.getCheckedNodes(true, true); //这里两个true,1. 是否只是叶子节点 2. 是否包含半选节点(就是使得选择的时候不包含父节点)
let arrLabel = [];
let arr = [];
res.forEach(item => {
arrLabel.push(item.label);
arr.push(item);
});
this.mineStatusValue = arr;
this.createForm.department = arrLabel;
console.log('arr:'+JSON.stringify(arr))
console.log('arrLabel:'+arrLabel)
},
roleChange(val) {
console.log(val)
console.log(val[0]);
let data = JSON.parse(JSON.stringify(this.roleList));
if (val.length > 0) {
if (val[0] !== '') {
data.forEach((v, i) => {
if (v.id !== '') {
v.disabled = false;
} else {
v.disabled = true;
}
})
} else {
data.forEach((v, i) => {
if (v.id !== '') {
v.disabled = true;
} else {
v.disabled = false;
}
})
}
} else {
data.forEach((v, i) =>{
v.disabled = false;
})
}
this.roleList = data;
}
},
//生命周期 - 创建完成(可以访问当前this实例)
created () {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
this.getRoles();
this.postDepartmentList();
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
.consumerDetails{
height: 98%;
}
.leftImg{
text-align: center;
}
/*.leftImg img{*/
/*width: 300px;*/
/*height: 420px;*/
/*margin-top: 40px;*/
/*}*/
.roleDiv /deep/ .el-select {
display: inline-block;
position: relative;
width: 100%;
}
.first {
margin-top: 50px;
}
.leftImg /deep/ .avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.leftImg /deep/ .avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.leftImg /deep/ .avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 250px;
height: 350px;
line-height: 350px;
text-align: center;
}
.leftImg /deep/ .avatar {
width: 250px;
height: 350px;
display: block;
}
.leftImgs{
margin-top: 100px;
width: 295px;
height: 413px;
}
</style>
<!-- 部门管理 -->
<template>
<div class='departmentManage'>
<div style="border: 1px solid #dedede;height: 100%;">
<el-row :gutter="0" style="height: 100%;">
<el-col :span="4">
<div class="leftTreeTitle">部门列表</div>
<div class="leftTree">
<el-tree :data="data" @current-node-key="currentDepartment" :default-expand-all="true" :expand-on-click-node="false" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</div>
</el-col>
<el-col :span="20" style="height: 100%;">
<div style="border-left: 1px solid #dedede;height: 100%;">
<div style="float: right;margin: 20px 30px 100px 30px;">
<el-button type="primary" icon="el-icon-plus" @click="addDepartment('departmentForm')">新增</el-button>
</div>
<div class="details" v-show="showDetail === true">
<div style="padding: 35px 100px 20px 100px;">
<el-form :model="departmentForm" :rules="rules" ref="departmentForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="当前选择部门">
<span>{{currentDepartment.name}}</span>
</el-form-item>
<el-form-item label="部门名称" prop="name">
<el-input v-model="departmentForm.name"></el-input>
</el-form-item>
<!--<el-form-item label="部门等级" prop="level">-->
<!--<el-input v-model="departmentForm.level"></el-input>-->
<!--</el-form-item>-->
<el-form-item label="部门描述" prop="description">
<el-input type="textarea" v-model="departmentForm.description"></el-input>
</el-form-item>
</el-form>
<div style="text-align: center;">
<el-button type="primary" v-show="!isShowDelete" @click="submitForm('departmentForm')">保存</el-button>
<el-button type="primary" v-show="isShowDelete" @click="editSubmitForm('departmentForm')">保存</el-button>
<el-button v-show="isShowDelete" @click="deleteDepartment('departmentForm')">删除</el-button>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
name: "departmentMAnage",
//import引入的组件需要注入到对象中才能使用
components: {},
data () {
//这里存放数据
return {
defaultProps: {
children: 'departments',
label: 'name'
},
data: [],
departmentForm: {
name: '',
// level: '',
description: '',
},
rules: {
name: [
{ required: true, message: '请输入部门名称', trigger: 'blur' }
],
// level: [
// { required: true, message: '请输入部门等级', trigger: 'blur' }
// ],
description: [
{ required: true, message: '请输入部门描述', trigger: 'blur' }
]
},
showDetail: false,
currentDepartment: '', // 当前
authorityLists: [],
isShowDelete: false,
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
postDepartment() {
this.$axios.postDepartmentList().then((res) => {
console.log(res)
if (res.request.status === 200) {
this.data = res.data;
this.handleNodeClick(res.data[0])
}
})
},
handleNodeClick(data) {
console.log(data);
this.$refs['departmentForm'].resetFields();
this.showDetail = true;
this.isShowDelete = true;
this.departmentForm = JSON.parse(JSON.stringify(data));
// this.departmentForm.name = data.name;
// // this.departmentForm.level = data.level;
// this.departmentForm.description = data.description;
this.currentDepartment = JSON.parse(JSON.stringify(data));
},
addDepartment(formName) {
this.showDetail = true;
this.isShowDelete = false;
let obj = {
name: '',
description: ''
}
this.departmentForm = obj;
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log(this.departmentForm)
let data = JSON.parse(JSON.stringify(this.departmentForm));
data.parentId = this.currentDepartment.id
console.log(data)
this.$axios.postAddDepartment(data).then((res) => {
console.log(res);
if (res.request.status === 200) {
this.$message({
message: '新增部门成功!',
type: 'success'
});
this.postDepartment();
this.showDetail = false;
}
})
} else {
console.log('error submit!!');
return false;
}
});
},
editSubmitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log(this.departmentForm)
this.$axios.putDepartmentList(this.departmentForm).then((res) => {
console.log(res);
if (res.request.status === 200) {
this.$message({
message: '保存部门成功!',
type: 'success'
});
this.postDepartment();
this.showDetail = false;
}
})
} else {
console.log('error submit!!');
return false;
}
});
},
deleteDepartment(formName) {
console.log(this.currentDepartment)
this.$axios.deleteDepartmentList(this.currentDepartment.id).then((res) => {
console.log(res)
if (res.request.status === 200) {
this.$message({
message: '删除部门成功!',
type: 'success'
});
this.postDepartment();
this.showDetail = false;
}
})
this.$refs[formName].resetFields();
}
},
//生命周期 - 创建完成(可以访问当前this实例)
created () {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
this.postDepartment()
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
.departmentManage{
height: 94%;
margin: 20px 100px;
}
.leftTreeTitle{
height: 60px;
text-align: center;
border-bottom: 1px solid #dedede;
line-height: 60px;
font-size: 30px;
}
.details{
clear: both;
margin: 40px 100px;
border: 1px solid #dedede;
}
</style>
<!-- 部门任务 -->
<template>
<div class='departmentTask' ref="tableDiv">
<!--{{taskListData}}-->
<!--<div>-->
<!--<ul>-->
<!--<li class="colorLi" v-for="(item, index) in colorList" :key="index">-->
<!--<span :style="{color: item.color}">{{item.name}}</span>-->
<!--<span :style="{background: item.color}" class="colorSpan"></span>-->
<!--</li>-->
<!--</ul>-->
<!--</div>-->
<!--<div id="containerTree">-->
<!--<el-table-->
<!--:data="taskListData"-->
<!--@row-click="openDetails"-->
<!--style="width: 100%">-->
<!--<el-table-column-->
<!--prop="title"-->
<!--label="任务名称"-->
<!--align="center">-->
<!--</el-table-column>-->
<!--<el-table-column-->
<!--prop="publisher"-->
<!--label="发布者"-->
<!--align="center">-->
<!--<template slot-scope="scope">-->
<!--<span>{{scope.row.publisher.username}}</span>-->
<!--</template>-->
<!--</el-table-column>-->
<!--<el-table-column-->
<!--prop="executor"-->
<!--align="center"-->
<!--label="执行者">-->
<!--<template slot-scope="scope">-->
<!--<span>{{scope.row.executor.username}}</span>-->
<!--</template>-->
<!--</el-table-column>-->
<!--<el-table-column-->
<!--prop="stateTime"-->
<!--label="任务开始时间"-->
<!--align="center">-->
<!--</el-table-column>-->
<!--<el-table-column-->
<!--prop="status"-->
<!--align="center"-->
<!--label="任务状态">-->
<!--<template slot-scope="scope">-->
<!--<span>{{$common.statusName(scope.row.status)}}</span>-->
<!--</template>-->
<!--</el-table-column>-->
<!--</el-table>-->
<!--</div>-->
<div style="padding: 0 40px;">
<el-tree :data="data"
@current-node-key="currentTask"
:default-expand-all="false"
:expand-on-click-node="false"
:props="defaultProps"
@node-click="handleNodeClick">
<!-- :render-content="renderContent" -->
<span class="custom-tree-node" slot-scope="{ node, data }">
<span :title="node.label" class="treeTitle">任务名称:{{ node.label }}</span>
<span class="treeStatus" :style="{color: colorSelect($common.statusName(node.data.status))}">{{$common.statusName(node.data.status)}}</span>
</span>
</el-tree>
</div>
<div>
<!--<el-table-->
<!--:data="taskListData"-->
<!--style="width: 100%;"-->
<!--row-key="wordId"-->
<!--border-->
<!--@row-click="openDetails"-->
<!--:height="divHeight"-->
<!--default-expand-all-->
<!--:tree-props="{children: 'workMppings', hasChildren: 'hasChildren'}">-->
<!--<el-table-column-->
<!--prop="title"-->
<!--label="任务名称">-->
<!--</el-table-column>-->
<!--<el-table-column-->
<!--prop="status"-->
<!--label="状态">-->
<!--<template slot-scope="scope">-->
<!--<span>{{$common.statusName(scope.row.status)}}</span>-->
<!--</template>-->
<!--</el-table-column>-->
<!--<el-table-column-->
<!--prop="wordId"-->
<!--label="id">-->
<!--</el-table-column>-->
<!--</el-table>-->
</div>
<div>
<!--<el-collapse v-model="activeNames" @change="handleChange">-->
<!--<el-collapse-item title="工作簿" name="1">-->
<!--<div>-->
<!--<el-collapse-item title="工作簿2" name="5">-->
<!--<div>-->
<!--<el-collapse-item title="工作簿3" name="6">-->
<!--<div>-->
<!--111-->
<!--</div>-->
<!--</el-collapse-item>-->
<!--</div>-->
<!--</el-collapse-item>-->
<!--</div>-->
<!--</el-collapse-item>-->
<!--<el-collapse-item title="反馈 Feedback" name="2">-->
<!--<div>控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;</div>-->
<!--<div>页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。</div>-->
<!--</el-collapse-item>-->
<!--<el-collapse-item title="效率 Efficiency" name="3">-->
<!--<div>简化流程:设计简洁直观的操作流程;</div>-->
<!--<div>清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;</div>-->
<!--<div>帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。</div>-->
<!--</el-collapse-item>-->
<!--<el-collapse-item title="可控 Controllability" name="4">-->
<!--<div>用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;</div>-->
<!--<div>结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。</div>-->
<!--</el-collapse-item>-->
<!--</el-collapse>-->
</div>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
import G6 from '@antv/g6';
export default {
name: "DepartmentTask",
//import引入的组件需要注入到对象中才能使用
components: {},
data () {
//这里存放数据
return {
defaultProps: {
children: 'workMppings',
label: 'title'
},
data: [],
divHeight: 0,
taskListData: [],
currentTask: '',
colorList: [
{name: '进行中', color: '#3cc65c'},
{name: '待审核', color: '#ed0044'},
{name: '未发布', color: '#666666'},
{name: '待考评', color: '#e25d03'},
{name: '已完结', color: '#075991'},
{name: '已删除', color: '#ff0000'},
],
activeNames: ['1']
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
colorSelect(val) {
let color;
switch(val) {
case '进行中':
color = '#3cc65c';
break;
case '待审核':
color = '#ed0044';
break;
case '未发布':
color = '#666666';
break;
case '待考评':
color = '#e25d03';
break;
case '已完结':
color = '#075991';
break;
case '已删除':
color = '#ff0000';
break;
default:
break;
}
return color;
},
handleChange(val) {
console.log(val);
},
openDetails(val) {
console.log(val)
localStorage.setItem('taskDetail', this.$Base64.encode(JSON.stringify(val)));
this.$router.push({name: 'taskDetails'});
},
getDeaprtmentTask(val) {
this.$axios.getTaskFindById(val).then((res) => {
console.log(res)
if (res.status === 200) {
// this.taskListData = res.data.workMppings;
this.divHeight = this.$refs.tableDiv.clientHeight;
let newData = JSON.parse(JSON.stringify(res.data.workMppings));
this.exec(newData)
this.data = res.data.workMppings;
// newData = JSON.parse(newData);
// console.log(newData)
// this.taskListData = newData;
// this.taskListData = res.data;
// let dataObj = {
// wordId: '123',
// title: '部门任务',
// status: 'none',
// children: []
// }
// let replaceData = JSON.parse(JSON.stringify(res.data.workMppings).replace(/workMppings/g, 'children'));
// dataObj.children = replaceData;
// console.log(dataObj)
// this.drawTree(dataObj);
// this.drawNew();
// this.drawNewTree(dataObj)
}
})
},
handleNodeClick(data) {
console.log(data);
localStorage.setItem('taskDetail', this.$Base64.encode(JSON.stringify(data)));
this.$router.push({name: 'taskDetails'});
},
exec(array) {
array.forEach(item => {
if (item.workMppings.length === 0) {
delete item.workMppings
} else {
this.exec(item.workMppings)
}
})
console.log(array)
this.taskListData = array;
},
renderContent(h, { node, data, store }) {
// node.data.statuaName = this.$common.statusName(node.data.status);
// console.log(node)
// let statusName = data.status;
// data.statuaName = this.$common.statusName(statusName);
// console.log(data);
return (
<span class="custom-tree-node">
<div>
<span style="">任务名称:{node.label}</span>
<span style="margin-left: 70px;">{node}</span>
</div>
</span>);
},
statusColor(val) {
console.log(val)
},
drawNewTree(val) {
G6.Util.traverseTree(val, function(item) {
item.id = item.wordId;
});
const COLLAPSE_ICON = function COLLAPSE_ICON(x, y, r) {
return [[ 'M', x, y ], [ 'a', r, r, 0, 1, 0, r * 2, 0 ], [ 'a', r, r, 0, 1, 0, -r * 2, 0 ], [ 'M', x + 2, y ], [ 'L', x + 2 * r - 2, y ]];
};
const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
return [[ 'M', x, y ], [ 'a', r, r, 0, 1, 0, r * 2, 0 ], [ 'a', r, r, 0, 1, 0, -r * 2, 0 ], [ 'M', x + 2, y ], [ 'L', x + 2 * r - 2, y ], [ 'M', x + r, y - r + 2 ], [ 'L', x + r, y + r - 2 ]];
};
G6.registerNode('tree-node', {
drawShape: function drawShape(cfg, group) {
let attrs = {}
if (cfg.status === 'unpublished') {
attrs= {
fill: '#666666',
stroke: '#666666',
cursor: 'pointer'
}
} else if (cfg.status === 'ongoing') {
attrs= {
fill: '#3cc65c',
stroke: '#3cc65c',
cursor: 'pointer'
}
} else if (cfg.status === 'audit') {
attrs= {
fill: '#ed0044',
stroke: '#ed0044',
cursor: 'pointer'
}
} else if (cfg.status === 'review') {
attrs= {
fill: '#e25d03',
stroke: '#e25d03',
cursor: 'pointer'
}
} else if (cfg.status === 'finished') {
attrs= {
fill: '#075991',
stroke: '#075991',
cursor: 'pointer'
}
} else if (cfg.status === 'delete') {
attrs= {
fill: '#ff0000',
stroke: '#ff0000',
cursor: 'pointer'
}
} else {
attrs= {
fill: '#999',
stroke: '#ececec'
}
}
const rect = group.addShape('rect', {
// attrs: {
// fill: '#fff',
// stroke: 'red'
// }
attrs: attrs
});
const content = cfg.title; // .replace(/(.{19})/g, '$1\n')
const text = group.addShape('text', {
attrs: {
text: content,
x: 0,
y: 0,
textAlign: 'left',
textBaseline: 'middle',
fill: '#FFF',
cursor: 'pointer'
}
});
const bbox = text.getBBox();
const hasChildren = cfg.children && cfg.children.length > 0;
if (hasChildren) {
group.addShape('marker', {
attrs: {
x: bbox.maxX + 24,
y: bbox.minX + bbox.height / 2 - 6,
r: 6,
symbol: COLLAPSE_ICON,
stroke: attrs.stroke,
lineWidth: 2
},
className: 'collapse-icon'
});
}
rect.attr({
x: bbox.minX - 4,
y: bbox.minY - 6,
width: bbox.width + (hasChildren ? 26 : 8),
height: bbox.height + 12
});
return rect;
}
}, 'single-shape');
const width = document.getElementById('containerTree').scrollWidth;
const height = document.getElementById('containerTree').scrollHeight;
const graph = new G6.TreeGraph({
container: 'containerTree',
width,
height,
modes: {
default: [{
type: 'collapse-expand',
onChange: function onChange(item, collapsed) {
console.log(item)
const data = item.get('model');
const icon = item.get('group').findByClassName('collapse-icon');
if (collapsed) {
icon.attr('symbol', EXPAND_ICON);
} else {
icon.attr('symbol', COLLAPSE_ICON);
}
data.collapsed = collapsed;
return true;
}
}, 'drag-canvas', 'zoom-canvas' ]
},
defaultNode: {
type: 'tree-node',
anchorPoints: [[ 0, 0.5 ], [ 1, 0.5 ]]
},
defaultEdge: {
type: 'cubic-horizontal',
style: {
stroke: '#A3B1BF'
}
},
layout: {
type: 'compactBox',
direction: 'LR',
getId: function getId(d) {
return d.wordId;
},
getHeight: function getHeight() {
return 16;
},
getWidth: function getWidth() {
return 16;
},
getVGap: function getVGap() {
return 20;
},
getHGap: function getHGap() {
return 300;
}
}
});
graph.data(val);
graph.render();
graph.fitView();
let that = this;
graph.on('click', function(event) {
console.log(event)
if (event.item !== null) {
const item = event.item.defaultCfg.model;
console.log(item)
if (item.wordId !== '123') {
localStorage.setItem('taskDetail', that.$Base64.encode(JSON.stringify(item)));
that.$router.push({name: 'taskDetails'})
}
}
});
},
},
//生命周期 - 创建完成(可以访问当前this实例)
created () {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
let data = JSON.parse(this.$Base64.decode(localStorage.getItem('login')));
console.log(data)
let that = this;
setTimeout(function () {
that.getDeaprtmentTask(data.id);
}, 200)
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
.departmentTask{
height: 100%;
}
#containerTree{
width: 100%;
height: 92%;
}
.colorLi{
float: left;
margin-right: 50px;
height: 50px;
line-height: 50px;
font-size: 18px;
}
.colorSpan{
display: inline-block;
margin-left: 10px;
width: 30px;
height: 10px;
border-radius: 4px;
}
/deep/ .el-tree-node__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 40px;
font-size: 18px;
margin: 10px 0;
cursor: pointer;
}
.treeTitle{
display: inline-block;
width: 800px;
height: 30px;
line-height: 30px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.treeStatus{
display: inline-block;
width: 80px;
height: 30px;
line-height: 30px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
<!-- 参数配置 -->
<template>
<div class='paramsSetting'>
<div style="height: 100%;">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="基础配置" name="base">
<div style="margin: 0 150px;">
<el-form :model="baseForm" :rules="rules" ref="baseForm" label-width="120px" class="demo-ruleForm">
<el-row :gutter="40">
<el-col :span="12">
<el-form-item label="上班时间" prop="workTime">
<el-time-picker :clearable="false" value-format="HH:mm:ss" placeholder="选择上班时间" v-model="baseForm.workTime" style="width: 90%;"></el-time-picker>
</el-form-item>
<el-form-item label="下班时间" prop="afterWorkTime">
<el-time-picker :clearable="false" value-format="HH:mm:ss" placeholder="选择下班时间" v-model="baseForm.afterWorkTime" style="width: 90%;"></el-time-picker>
</el-form-item>
<el-form-item label="日基础分" prop="score">
<el-input v-model="baseForm.score" @change="baseScore" placeholder="请输入每日考勤基础分"></el-input>
<span style="margin-left: 10px;"></span>
</el-form-item>
<el-form-item label="迟到次数" prop="lateNum">
<el-input v-model="baseForm.lateNum" placeholder="请输入迟次到数"></el-input>
<span style="margin-left: 10px;"></span>
</el-form-item>
<el-form-item label="全年病假次数" prop="sickNum">
<el-input v-model="baseForm.sickNum" placeholder="全年可请病假次数"></el-input>
<span style="margin-left: 10px;"></span>
</el-form-item>
<el-form-item label="月补卡数" prop="addCardNum">
<el-input v-model="baseForm.addCardNum" placeholder="月补卡次数"></el-input>
<span style="margin-left: 10px;"></span>
</el-form-item>
<el-form-item label="弹性迟到扣分1" prop="latePointsFifteen">
<el-input v-model="baseForm.latePointsFifteen" placeholder="迟到15分钟以上,1小时以内扣分"></el-input>
<span style="margin-left: 10px;"></span>
</el-form-item>
<el-form-item label="弹性迟到扣分2" prop="latePointsHalfOfDay">
<el-input v-model="baseForm.latePointsHalfOfDay" placeholder="迟到1小时以上到半天内扣分"></el-input>
<span style="margin-left: 10px;"></span>
</el-form-item>
<el-form-item label="弹性迟到时间1" prop="lateNumOfFixedTime">
<el-input v-model="baseForm.lateNumOfFixedTime" placeholder="迟到15分钟以上,1小时以内扣分"></el-input>
<span style="margin-left: 10px;"></span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="弹性迟到时间2" prop="lateWorkTimeOne">
<el-input v-model="baseForm.lateWorkTimeOne" placeholder="迟到1小时以上到半天内扣分"></el-input>
<span style="margin-left: 10px;"></span>
</el-form-item>
<el-form-item label="弹性迟到时间3" prop="lateWorkTimeTwo">
<el-input v-model="baseForm.lateWorkTimeTwo" placeholder="迟到1小时以上到半天内扣分"></el-input>
<span style="margin-left: 10px;"></span>
</el-form-item>
<el-form-item label="事假半天扣分" prop="thingHalfOfDay">
<el-input v-model="baseForm.thingHalfOfDay" placeholder="事假半天扣分"></el-input>
<span style="margin-left: 10px;"></span>
</el-form-item>
<el-form-item label="事假一天扣分" prop="thingDay">
<el-input v-model="baseForm.thingDay" placeholder="事假一天扣分"></el-input>
<span style="margin-left: 10px;"></span>
</el-form-item>
<el-form-item label="调休半天扣分" prop="paidHalfOfDayLeave">
<el-input v-model="baseForm.paidHalfOfDayLeave" placeholder="调休半天扣分"></el-input>
<span style="margin-left: 10px;"></span>
</el-form-item>
<el-form-item label="调休一天" prop="paidDayLeave">
<el-input v-model="baseForm.paidDayLeave" placeholder="调休一天扣分"></el-input>
<span style="margin-left: 10px;"></span>
</el-form-item>
<el-form-item label="加班一小时" prop="workOverScore">
<el-input v-model="baseForm.workOverScore" placeholder="加班一小时加分"></el-input>
<span style="margin-left: 10px;"></span>
</el-form-item>
<el-form-item label="全天旷工扣分" prop="absenteeism">
<el-input v-model="baseForm.absenteeism" placeholder="全天旷工扣分"></el-input>
<span style="margin-left: 10px;"></span>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div style="text-align: center;">
<el-button type="primary" @click="submitForm('baseForm')">保存</el-button>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="节假日配置" name="holiday">
<div>
<el-calendar v-model="value" id="calendar">
<!-- 这里使用的是 2.5 slot 语法,对于新项目请使用 2.6 slot 语法-->
<template
slot="dateCell"
slot-scope="{date, data}"
>
<!--自定义内容-->
<div style="height: 75px;" @click="clickCurrentDay(date, data)">
<!--<div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>-->
<div style="font-size: 20px;" class="calendar-day">{{ data.day.split('-').slice(1).join('-') }}</div>
<div v-for="(item,index) in calendarData" :key="index">
<div class="workHoliday" v-if="data.day === item.date">{{item.status === '1' ? '休' : '班'}}</div>
</div>
</div>
</template>
</el-calendar>
<div style="text-align: center;">
<el-button type="primary" @click="settingWork()">设为工作日</el-button>
<el-button type="primary" @click="settingHoliday()">设为休息日</el-button>
<el-button type="primary" @click="saveWorkHoliday()">保存</el-button>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
name: "paramsSetting",
//import引入的组件需要注入到对象中才能使用
components: {},
data () {
//这里存放数据
return {
activeName: 'base',
baseForm:{
workTime:'09:00:00', // 上班时间
afterWorkTime: '17:00:00', // 下班时间
score: '', // 每日考勤基础分
lateNum:'', // 迟到次数
latePointsFifteen: '', // 迟到15分钟以上,1小时以内
latePointsHalfOfDay: '', // 迟到半天
thingHalfOfDay: '', // 事假半天扣分
sickNum:'', // 病假次数
paidHalfOfDayLeave: '', // 调休半天
paidDayLeave: '', // 调休一天
addCardNum: '', // 月补卡次数
workOverScore: '', // 加班一小时加分
absenteeism: '', // 全天旷工扣分
thingDay: '', // 事假一天扣分,
lateNumOfFixedTime: '', // 弹性扣分时间1 迟到时间
lateWorkTimeOne: '', // 弹性扣分时间2 迟到15-1小时
lateWorkTimeTwo: '' // 弹性扣分时间3 迟到1小时-半天
},
rules: {
workTime: [
{type: 'string', required: true, message: '请选择上班时间', trigger: 'change' }
],
afterWorkTime: [
{type: 'string', required: true, message: '请选择下班时间', trigger: 'change' }
],
score: [
{ required: true, message: '请输入日基础分', trigger: 'blur' }
],
lateNum: [
{ required: true, message: '请输入迟到次数', trigger: 'blur' }
],
latePointsFifteen: [
{ required: true, message: '请输入迟到15分钟以上,一小时以内扣分', trigger: 'blur' }
],
latePointsHalfOfDay: [
{ required: true, message: '请输入迟到一小时以上,半天内扣分', trigger: 'blur' }
],
thingHalfOfDay: [
{ required: true, message: '请输入事假半天扣分', trigger: 'blur' }
],
sickNum: [
{ required: true, message: '请输入全年病假次数', trigger: 'blur' }
],
paidHalfOfDayLeave: [
{ required: true, message: '请输入调休半天扣分', trigger: 'blur' }
],
paidDayLeave: [
{ required: true, message: '请输入调休一天扣分', trigger: 'blur' }
],
addCardNum: [
{ required: true, message: '请输入月补卡数', trigger: 'blur' }
],
workOverScore: [
{ required: true, message: '请输入加班一小时分数', trigger: 'blur' }
],
absenteeism: [
{ required: true, message: '请输入全天旷工扣分', trigger: 'blur' }
],
thingDay: [
{ required: true, message: '请输入事假一天扣分', trigger: 'blur' }
],
lateNumOfFixedTime: [
{ required: true, message: '请输入弹性扣分时间1', trigger: 'blur' }
],
lateWorkTimeOne: [
{ required: true, message: '请输入弹性扣分时间2', trigger: 'blur' }
],
lateWorkTimeTwo: [
{ required: true, message: '请输入弹性扣分时间3', trigger: 'blur' }
]
},
calendarData: [
// { months: ['02', '03'],days: ['15'],things: '看电影' },
// { months: ['02', '03'], days: ['02'],things: '去公园野炊' },
// { months: ['11'], days: ['02'],things: '看星星' },
// { months: ['11'], days: ['02'],things: '看月亮' },
// {date:['2020-02-10'],things:['去公园野炊','看星星','看月亮']},
// {date:['2020-02-20'],things:['看电影']}
],
value: new Date(),
currentSelectDay: {},
nowDay: '',
saveGetCalendar: [],
saveHolidayCurrent: [],
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
getParams() {
this.$axios.getAddConfig().then((res) => {
console.log(res)
if (res.request.status === 200) {
if (res.data !== null) {
this.baseForm = res.data;
}
}
})
},
getHoliday(val) {
this.$axios.getHoliday(val).then((res) => {
console.log(res)
if (res.data.length !== 0) {
for (let i = 0; i < res.data.length; i++) {
res.data[i].date = res.data[i].date.substring(0,10)
}
console.log(res.data)
this.calendarData = res.data;
this.saveHolidayCurrent = res.data;
}
})
},
submitForm(formName) {
console.log(this.baseForm)
this.$refs[formName].validate((valid) => {
if (valid) {
this.$axios.postAddConfig(this.baseForm).then((res) => {
console.log(res)
if (res.request.status === 200) {
this.$message({
message: '保存配置成功!',
type: 'success'
});
this.baseForm = res.data;
}
})
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
clickCurrentDay(val, val2) {
console.log(val2)
this.currentSelectDay = val2;
},
settingWork() {
let data = JSON.parse(JSON.stringify(this.currentSelectDay));
console.log(data)
if (JSON.stringify(data) !== '{}') {
let obj = data.day;
let month = JSON.parse(JSON.stringify(this.calendarData));
console.log(month)
let currentIdIndex = month.findIndex(item => item.date === obj);
console.log(currentIdIndex)
month[currentIdIndex].status = '0';
this.calendarData = month;
console.log(this.calendarData)
}
},
settingHoliday() {
let data = JSON.parse(JSON.stringify(this.currentSelectDay));
console.log(data)
if (JSON.stringify(data) !== '{}') {
let obj = data.day;
let month = JSON.parse(JSON.stringify(this.calendarData));
console.log(month)
let currentIdIndex = month.findIndex(item => item.date === obj);
console.log(currentIdIndex)
month[currentIdIndex].status = '1';
this.calendarData = month;
console.log(this.calendarData)
}
},
saveWorkHoliday() {
console.log(this.calendarData);
this.$axios.putHoliday(this.calendarData).then((res) => {
console.log(res)
if (res.data.length > 0) {
this.$message({
message: '保存节假日设置成功!',
type: 'success'
});
for (let i = 0; i < res.data.length; i++) {
res.data[i].date = res.data[i].date.substring(0,10)
}
console.log(res.data)
this.calendarData = res.data;
}
})
},
baseScore(val) {
console.log(val)
this.baseForm.thingHalfOfDay = (0.5 * parseInt(val)) + '';
this.baseForm.paidHalfOfDayLeave = (0.5 * parseInt(val)) + ''
this.baseForm.paidDayLeave = val + '';
this.baseForm.latePointsFifteen = (parseInt(val) / 8) + '';
this.baseForm.latePointsHalfOfDay = (parseInt(val) * 1) + '';
this.baseForm. workOverScore = (parseInt(val) / 8) + '';
this.baseForm.absenteeism = (3 * parseInt(val)) + '';
this.baseForm.thingDay = val + '';
},
},
//生命周期 - 创建完成(可以访问当前this实例)
created () {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
this.getParams();
this.getHoliday(this.$common.timeYMDFilter(new Date()));
this.$nextTick(() => {
// 点击前一个月
let prevBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');
let current = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)');
let nextBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)');
prevBtn.addEventListener('click',() => {
const demo = document.getElementsByClassName("el-calendar__title")[0].innerText;
const demo1 = demo.replace(/\s+/g,"");
const demo2 = demo1.replace('年', '-');
const demo3 = demo2.replace('月', '-') + '01';
const demo4 = this.$common.timeYMDFilter(new Date(demo3))
console.log(demo4);
this.getHoliday(demo4);
})
current.addEventListener('click',() => {
const demo4 = this.$common.timeYMDFilter(new Date())
console.log(demo4);
this.getHoliday(demo4);
})
nextBtn.addEventListener('click',() => {
const demo = document.getElementsByClassName("el-calendar__title")[0].innerText;
const demo1 = demo.replace(/\s+/g,"");
const demo2 = demo1.replace('年', '-');
const demo3 = demo2.replace('月', '-') + '01';
const demo4 = this.$common.timeYMDFilter(new Date(demo3))
console.log(demo4)
this.getHoliday(demo4);
})
})
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
.paramsSetting{
}
.workHoliday{
margin-top: 30px;
font-size: 30px;
text-align: center;
}
/deep/ .el-input {
position: relative;
font-size: 14px;
display: inline-block;
width: 90%;
}
/deep/ .el-calendar__header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 12px 20px;
border-bottom: 1px solid #EBEEF5;
}
</style>
<!-- 个人信息 -->
<template>
<div class='personDetails'>
<div style="">
<el-row :gutter="20">
<el-col :span="5">
<div class="leftImg">
<img src="../assets/images/xq-tx-1.png"/>
<!--<img src="../assets/images/xq-tx-2.png"/>-->
</div>
</el-col>
<el-col :span="19">
<div>
<el-form :hide-required-asterisk="true" :model="userForm" :rules="rules" ref="userForm" label-width="100px" class="demo-ruleForm">
<el-row :gutter="10">
<el-col :span="8">
<el-form-item class="first" label="姓名">
<div>{{userForm.username}}</div>
</el-form-item>
<el-form-item class="first" label="身份证">
<div>{{userForm.idCard}}</div>
</el-form-item>
<el-form-item class="first" prop="email" label="邮箱">
<el-input v-model="userForm.email"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="first" label="电话1" prop="phone1">
<el-input v-model.number="userForm.phone1" autocomplete="off"></el-input>
</el-form-item>
<el-form-item class="first" label="地址" prop="address">
<el-input v-model="userForm.address"></el-input>
</el-form-item>
<!--<el-form-item class="first" label="部门2" prop="department2">-->
<!--<div>{{userForm.department2}}</div>-->
<!--</el-form-item>-->
</el-col>
<el-col :span="8">
<el-form-item class="first" label="电话2" prop="phone2">
<el-input v-model="userForm.phone2"></el-input>
</el-form-item>
<el-form-item class="first" label="入职时间" >
<div>{{userForm.entryTime}}</div>
</el-form-item>
</el-col>
</el-row>
<div class="roleDiv first" style="width: 100%;">
<el-form-item class="first" label="部门">
<span class="deSpan">{{nameDepartment(userForm.departmentIds)}}</span>
</el-form-item>
<el-form-item class="first" label="岗位">
<div>{{userForm.jobs}}</div>
</el-form-item>
<el-form-item label="角色" >
<span class="roleSpan" v-for="(items, index) in userForm.roles" :key="index">{{items.name}}</span>
</el-form-item>
</div>
</el-form>
</div>
</el-col>
</el-row>
</div>
<div style="text-align: center;position: absolute;bottom: 30px;left: 48%;">
<el-button type="primary" @click="submitForm('userForm')" style="margin-right: 30px;">保存</el-button>
</div>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
name: "personDetails",
//import引入的组件需要注入到对象中才能使用
components: {},
data () {
var checkPhone = (rule, value, callback) => {
const phoneReg = /^1[3|4|5|6|7|8][0-9]{9}$/;
console.log(value)
if (value !== '') {
console.log(value)
if (phoneReg.test(value)) {
callback()
} else {
callback(new Error('电话号码格式不正确'))
}
} else {
callback()
}
};
var checkPhone2 = (rule, value, callback) => {
const phoneReg = /^1[3|4|5|6|7|8][0-9]{9}$/;
console.log(value)
if (value !== '') {
console.log(value)
if (phoneReg.test(value)) {
callback()
} else {
callback(new Error('电话2号码格式不正确'))
}
} else {
callback()
}
};
//这里存放数据
return {
paramsData: '',
userForm:{
username: '',
phone1: '',
phone2: '',
idCard: '',
address: '',
jobs: '',
departmentIds: '',
// department2: '',
// department3: '',
email: '',
entryTime: '',
},
rules:{
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
],
phone1: [
{required: true, validator: checkPhone, trigger: 'blur' }
],
phone2: [
{ validator: checkPhone2, trigger: 'blur' }
],
idCard: [
{ required: true, message: '请填写证件号码', trigger: 'blur' },
{
pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
message: '证件号码格式有误!',
trigger: 'blur'
}
],
address: [
{ required: true, message: '请输入地址', trigger: 'blur' },
],
jobs: [
{ required: true, message: '请输入岗位', trigger: 'blur' },
],
departmentIds: [
{ required: true, message: '请输入部门1', trigger: 'blur' },
],
// department2: [
// { required: true, message: '请输入部门2', trigger: 'blur' },
// ],
// department3: [
// { required: true, message: '请输入部门3', trigger: 'blur' },
// ],
email: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
],
entryTime: [
{ required: true, message: '请选择入职时间', trigger: 'change' }
],
},
deOptions: []
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
postDepartmentList() {
this.$axios.getAllDepartment().then((res) => {
console.log(res)
if (res.request.status === 200) {
this.deOptions = res.data;
}
})
},
nameDepartment(val) {
console.log(val)
let name = '';
console.log(this.deOptions)
for ( let i = 0; i < this.deOptions.length; i++ ) {
for (let j = 0; j < val.length; j++) {
if (this.deOptions[i].id === val[j]) {
name = name + this.deOptions[i].name + '、';
}
}
}
name = name.substring(0, name.length - 1);
console.log(name);
return name;
},
submitForm(formName) {
console.log(this.userForm)
this.$refs[formName].validate((valid) => {
if (valid) {
this.$axios.putOrdinaryUser(this.userForm).then((res) => {
console.log(res)
if (res.status === 200) {
this.$message({
message: '修改信息成功!',
type: 'success'
});
localStorage.setItem('login', this.$Base64.encode(JSON.stringify(res.data)));
this.userForm = res.data;
}
})
} else {
console.log('error submit!!');
return false;
}
});
},
deleteUSer() {
}
},
//生命周期 - 创建完成(可以访问当前this实例)
created () {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
// let data = {name: '张三', tel1: 13456870678, tel2: '', idCard: '330311111111111111',
// address: '杭州市嘻嘻嘻嘻嘻嘻嘻嘻', job: '开发工程师', department1: '研发中心',
// department2: '技术中心', department3: '工作簿组', email: '123@123.com',entryTime:'2020-02-02',
// role: ['工作簿组长']
// }
this.postDepartmentList();
let that = this;
setTimeout(function () {
let data = JSON.parse(that.$Base64.decode(localStorage.getItem('login')));
console.log(data)
that.userForm = data;
}, 300)
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
.consumerDetails{
height: 98%;
}
.leftImg{
text-align: center;
}
.leftImg img{
width: 300px;
height: 420px;
margin-top: 40px;
}
.roleDiv /deep/ .el-select {
display: inline-block;
position: relative;
width: 100%;
}
.first {
margin-top: 50px;
}
.roleSpan{
display: inline-block;
/*width: 100px;*/
height: 40px;
padding: 0 10px;
font-size: 18px;
line-height: 40px;
background: #53b0e6;
text-align: center;
border-radius: 4px;
color: #FFF;
}
.deSpan{
/*display: inline-block;*/
/*height: 40px;*/
/*padding: 0 5px;*/
font-size: 18px;
/*line-height: 40px;*/
/*background: #53b0e6;*/
/*text-align: center;*/
/*border-radius: 4px;*/
/*color: #FFF;*/
}
</style>
<!-- 人员信息 -->
<template>
<div class='personInfo'>
<div style="">
<el-row :gutter="20">
<el-col :span="5">
<div class="leftImg">
<img src="../assets/images/xq-tx-1.png"/>
<!--<img src="../assets/images/xq-tx-2.png"/>-->
</div>
</el-col>
<el-col :span="19">
<div>
<el-form :hide-required-asterisk="true" :model="userForm" :rules="rules" ref="userForm" label-width="100px" class="demo-ruleForm">
<el-row :gutter="10">
<el-col :span="8">
<el-form-item class="first" label="姓名">
<div>{{userForm.username}}</div>
</el-form-item>
<el-form-item class="first" label="身份证">
<div>{{userForm.idCard}}</div>
</el-form-item>
<el-form-item class="first" prop="email" label="邮箱">
<div>{{userForm.email}}</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="first" label="电话1" prop="phone1">
<div>{{userForm.phone1}}</div>
</el-form-item>
<el-form-item class="first" label="地址" prop="address">
<div>{{userForm.address}}</div>
</el-form-item>
<!--<el-form-item class="first" label="部门2" prop="department2">-->
<!--<div>{{userForm.department2}}</div>-->
<!--</el-form-item>-->
</el-col>
<el-col :span="8">
<el-form-item class="first" label="电话2" prop="phone2">
<div>{{userForm.phone2}}</div>
</el-form-item>
<el-form-item class="first" label="入职时间" >
<div>{{userForm.entryTime}}</div>
</el-form-item>
</el-col>
</el-row>
<div class="roleDiv first" style="width: 100%;">
<el-form-item class="first" label="部门">
<span class="deSpan">{{nameDepartment(userForm.departmentIds)}}</span>
</el-form-item>
<el-form-item class="first" label="岗位">
<div>{{userForm.jobs}}</div>
</el-form-item>
<el-form-item label="角色" >
<span class="roleSpan" v-for="(items, index) in userForm.roles" :key="index">{{items.name}}</span>
</el-form-item>
</div>
</el-form>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
name: "personInfo",
//import引入的组件需要注入到对象中才能使用
components: {},
data () {
//这里存放数据
return {
paramsData: '',
userForm:{
username: '',
phone1: '',
phone2: '',
idCard: '',
address: '',
jobs: '',
departmentIds: '',
// department2: '',
// department3: '',
email: '',
entryTime: '',
},
rules:{
},
deOptions: []
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
postDepartmentList() {
this.$axios.getAllDepartment().then((res) => {
console.log(res)
if (res.request.status === 200) {
this.deOptions = res.data;
}
})
},
nameDepartment(val) {
console.log(val)
let name = '';
console.log(this.deOptions)
for ( let i = 0; i < this.deOptions.length; i++ ) {
for (let j = 0; j < val.length; j++) {
if (this.deOptions[i].id === val[j]) {
name = name + this.deOptions[i].name + '、';
}
}
}
name = name.substring(0, name.length - 1);
console.log(name);
return name;
},
},
//生命周期 - 创建完成(可以访问当前this实例)
created () {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
this.postDepartmentList();
let that = this;
setTimeout(function () {
let data = JSON.parse(that.$Base64.decode(localStorage.getItem('infoPerson')));
console.log(data)
that.userForm = data;
}, 300)
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
.leftImg{
text-align: center;
}
.leftImg img{
width: 300px;
height: 420px;
margin-top: 40px;
}
.first {
margin-top: 50px;
}
.roleSpan{
display: inline-block;
/*width: 100px;*/
height: 40px;
padding: 0 10px;
font-size: 18px;
line-height: 40px;
background: #53b0e6;
text-align: center;
border-radius: 4px;
color: #FFF;
}
.deSpan{
/*display: inline-block;*/
/*height: 40px;*/
/*padding: 0 5px;*/
font-size: 18px;
/*line-height: 40px;*/
/*background: #53b0e6;*/
/*text-align: center;*/
/*border-radius: 4px;*/
/*color: #FFF;*/
}
</style>
<!-- 人员列表 -->
<template>
<div class='personList'>
<div>
<el-select v-if="options.length > 0" v-model="department" @change="doSearch" placeholder="请选择部门">
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</div>
<div>
<el-table
:data="personListData"
style="width: 100%">
<el-table-column
prop="username"
align="center"
label="人员姓名">
</el-table-column>
<el-table-column
prop="departmentIds"
align="center"
label="部门">
<template slot-scope="scope">
<span>{{departName(scope.row.departmentIds)}}</span>
</template>
</el-table-column>
<el-table-column
prop="roles"
align="center"
label="角色">
<template slot-scope="scope">
<span v-for="(item,index) in scope.row.roles" :key="index">{{item.name}}<span v-show="index !== (scope.row.roles.length - 1)"></span></span>
</template>
</el-table-column>
<el-table-column
prop="workCount"
align="center"
sortable
label="任务数(个)">
</el-table-column>
<el-table-column
prop="phone1"
align="center"
label="手机号">
</el-table-column>
<el-table-column
prop="status"
align="center"
label="工作状态">
<template slot-scope="scope">
<span>{{scope.row.status === '0' ? '空闲' : scope.row.status === '1' ? '正常' : '忙碌'}}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
width="150">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div style="text-align: center;margin-top: 20px;">
<el-pagination
hide-on-single-page
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-size="pageSize"
layout="prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
name: "PersonList",
//import引入的组件需要注入到对象中才能使用
components: {},
data () {
//这里存放数据
return {
department: '',
options: [
],
personListData: [],
currentUser: '',
currentPage: 1,
pageSize: 10,
total: 0,
deOptions: [],
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
postDepartmentList() {
this.$axios.getAllDepartment().then((res) => {
console.log(res)
if (res.request.status === 200) {
this.deOptions = res.data;
}
})
},
handleClick(val) {
console.log(val)
localStorage.setItem('infoPerson', this.$Base64.encode(JSON.stringify(val)));
this.$router.push({name: 'personInfo'});
},
getSelectDepartment() {
console.log(this.currentUser);
this.$axios.getDepartmentFind(this.currentUser.id).then((res) => {
console.log(res)
if (res.request.status === 200) {
if (res.data !== null && res.data.length > 0) {
this.options = res.data;
this.department = res.data[0].id;
this.doSearch(res.data[0].id);
}
}
})
},
doSearch(val) {
console.log(val)
this.department = val;
this.getPersonList()
},
getPersonList(val) {
let obj = {
currentPage: this.currentPage,
pageSize: this.pageSize,
deId: this.department,
id: this.currentUser.id
}
this.$axios.getManageUserList(obj).then((res) => {
console.log(res)
if (res.request.status === 200) {
this.total = res.data.totalCount;
this.personListData = res.data.rows;
}
})
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.currentPage = val;
this.getPersonList();
// console.log(`当前页: ${val}`);
},
departName(val) {
let name = '';
for (let i = 0; i < this.deOptions.length; i++) {
for (let j = 0; j < val.length; j++) {
if (this.deOptions[i].id === val[j]) {
name = name + this.deOptions[i].name + '、';
}
}
}
name = name.substring(0, name.length - 1);
return name;
}
},
//生命周期 - 创建完成(可以访问当前this实例)
created () {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
this.postDepartmentList();
this.currentUser = JSON.parse(this.$Base64.decode(localStorage.getItem('login')));
let that = this;
setTimeout(function () {
that.getSelectDepartment();
}, 200)
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
</style>
<!-- 人员管理 -->
<template>
<div class='personManage'>
<ul class="userAuthority">
<li class="personInfo" @click="personClick('personDetails')">
<div class="nameManage">个人信息</div>
</li>
<li class="personList" @click="personClick('personList')">
<div class="nameManage">人员列表</div>
</li>
</ul>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
name: "personManage",
//import引入的组件需要注入到对象中才能使用
components: {},
data () {
//这里存放数据
return {};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
personClick(val) {
this.$router.push({name: val});
}
},
//生命周期 - 创建完成(可以访问当前this实例)
created () {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
.personManage{
width: 100%;
height: 100%;
background: #FFF;
}
.personInfo{
background: url("../assets/images/xz.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.personList{
background: url("../assets/images/xz.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
</style>
<!-- 查看个人任务状态 -->
<template>
<div class='personTask'>
<div style="height: 99%;">
<el-tabs type="border-card">
<el-tab-pane label="接受的任务">
<div>
<ul class="statisticsUl">
<li>总任务数: 20</li>
<li>执行中的任务: 20</li>
<li>已完成的任务: 20</li>
<li>工作状态: 忙碌</li>
</ul>
<div>
<ul>
<li class="taskLi" v-for="(item, index) in reviceData" :key="index">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span style="float: left;">任务名称:{{item.taskName}}</span>
<span>发布者:{{item.announcer}}</span>
<span style="float: right;">状态:{{item.status}}</span>
</div>
<div style="padding: 15px 20px;text-align: left;">
<span>{{item.des}}</span>
</div>
</el-card>
</li>
</ul>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="分解的任务">
<div>
<ul class="statisticsUl">
<li>总任务数: 20</li>
<li>执行中的任务: 20</li>
<li>已完成的任务: 20</li>
<li>工作状态: 忙碌</li>
</ul>
<div>
<ul>
<li class="taskLi" v-for="(item, index) in breakDownData" :key="index">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span style="float: left;">任务名称:{{item.taskName}}</span>
<span>发布者:{{item.announcer}}</span>
<span style="float: right;">状态:{{item.status}}</span>
</div>
<div class="taskDes">
<span>{{item.des}}</span>
</div>
</el-card>
</li>
</ul>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
name: "PersonTask",
//import引入的组件需要注入到对象中才能使用
components: {},
data () {
//这里存放数据
return {
reviceData: [
{taskName: '工作簿代码编写', announcer: '李四', status: '进行中', des: '后端代码编写,前端代码编写'}
],
breakDownData: [
{taskName: '工作簿后端代码编写', announcer: '王五', status: '待审批', des: '后端代码编写'}
]
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {},
//生命周期 - 创建完成(可以访问当前this实例)
created () {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
.personTask{
height: 100%;
}
.statisticsUl li{
float: left;
margin-right: 30px;
font-size: 20px;
}
.taskLi{
clear: both;
padding-top: 20px;
font-size: 20px;
text-align: center;
}
.taskDes{
clear: both;
padding: 15px 20px;
text-align: left;
}
/deep/ .el-tabs__nav {
white-space: nowrap;
position: relative;
transition: -webkit-transform .3s;
-webkit-transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
transition: transform .3s,-webkit-transform .3s;
float: left;
z-index: 2;
width: 51%;
}
/deep/ .el-tabs--border-card>.el-tabs__header .el-tabs__item {
-webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
transition: all .3s cubic-bezier(.645,.045,.355,1);
border: 1px solid transparent;
margin-top: -1px;
color: #909399;
width: 100%;
}
/deep/ .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
color: #409EFF;
background-color: #FFF;
border-right-color: #DCDFE6;
border-left-color: #DCDFE6;
}
</style>
<!-- 角色管理 -->
<template>
<div class='roleManage'>
<div style="border: 1px solid #dedede;height: 100%;">
<el-row :gutter="0" style="height: 100%;">
<el-col :span="4">
<div class="leftTreeTitle">部门列表</div>
<div class="leftTree">
<el-tree :data="data" @current-node-key="currentDepartment" :default-expand-all="true" :expand-on-click-node="false" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</div>
</el-col>
<el-col :span="20" style="height: 100%;">
<div style="border-left: 1px solid #dedede;height: 100%;">
<el-table
:data="tableRoleData"
border
align="center"
style="width: 100%">
<el-table-column
align="center"
prop="department"
label="部门名称">
</el-table-column>
<el-table-column
align="center"
prop="name"
label="角色名称">
</el-table-column>
<el-table-column
align="center"
prop="description"
label="角色描述">
</el-table-column>
<el-table-column
align="center"
prop="authorities"
label="拥有权限">
<template slot-scope="scope">
<span v-for="(item, index) in scope.row.authorities" :key="index">{{item.name}}<span v-show="(index + 1) !== scope.row.authorities.length"></span></span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
width="150">
<template slot-scope="scope">
<el-button @click="editRole(scope.row)" size="small">修改</el-button>
<el-button @click="deleteRole(scope.row)" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
<div style="text-align: center;margin-top: 20px;">
<el-button type="primary" icon="el-icon-plus" @click="addRole">新增</el-button>
</div>
</div>
</el-col>
</el-row>
</div>
<roleDialog :showRoleDialog="showRoleDialog" :authorityLists="authorityLists" :roleDetails="roleDetails" ref="dialogRole" @close="closeRoleDialog"></roleDialog>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
import roleDialog from '../components/roleDialog';
export default {
name: "RoleManage",
//import引入的组件需要注入到对象中才能使用
components: {roleDialog},
data () {
//这里存放数据
return {
defaultProps: {
children: 'departments',
label: 'name'
},
data: [],
tableRoleData: [],
showRoleDialog: false,
roleDetails: {
name: '',
isLeader: '',
description: '',
authorities: [],
department: ''
},
currentDepartment: '', // 当前
authorityLists: [],
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
postDepartmentList() {
this.$axios.postDepartmentList().then((res) => {
console.log(res)
if (res.request.status === 200) {
this.data = res.data;
}
})
},
handleNodeClick(data) {
console.log(data);
this.currentDepartment = data;
this.$axios.getRoleFindDepartment(data.id).then((res) => {
console.log(res)
if (res.request.status === 200) {
res.data.forEach((v, i) => {
v.department = data.name;
})
this.tableRoleData = res.data;
}
})
},
addRole() {
console.log(this.currentDepartment.id)
this.roleDetails = {
name: '',
isLeader: '',
description: '',
authorities: [],
departmentId: this.currentDepartment.id
}
this.showRoleDialog = true;
},
editRole(val) {
console.log(val);
this.showRoleDialog = true;
this.roleDetails = val;
},
deleteRole(val) {
console.log(val)
this.$axios.deleteRole(val.id).then((res) => {
console.log(res)
if (res.request.status === 200) {
this.$message({
message: '删除角色成功!',
type: 'success'
});
this.handleNodeClick(this.currentDepartment);
}
})
},
closeRoleDialog() {
this.showRoleDialog = false;
this.handleNodeClick(this.currentDepartment);
},
getAuthorityList() {
this.$axios.putAuthority().then((res) => {
console.log(res)
if (res.request.status === 200) {
this.authorityLists = res.data;
}
})
},
},
//生命周期 - 创建完成(可以访问当前this实例)
created () {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
this.postDepartmentList();
this.getAuthorityList();
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
.roleManage{
height: 99%;
}
.leftTreeTitle{
height: 60px;
text-align: center;
border-bottom: 1px solid #dedede;
line-height: 60px;
font-size: 30px;
}
</style>
<!-- 查看任务详情 -->
<template>
<div class='taskDetails'>
<div style="text-align: right;"><el-button type="primary" @click="openHistory">查看任务历史</el-button></div>
<div style="height: 90%;margin-top: 20px;">
<el-form :model="taskForm" :rules="rules" ref="taskForm" label-width="100px" class="demo-ruleForm">
<el-row :gutter="10">
<el-col :span="6">
<el-form-item label="任务标题:" prop="title">
<span :title="taskForm.title" class="titleSpans">{{taskForm.title}}</span>
</el-form-item>
<el-form-item label="发布者:" >
<span>{{taskForm.publisher.username}}</span>
</el-form-item>
<el-form-item v-if="isPublisher === true && taskForm.status === 'audit'" label="任务量(天):" prop="workload">
<el-input v-if="isPublisher === true && taskForm.status === 'audit'" v-model.number="taskForm.workload"></el-input>
</el-form-item>
<el-form-item v-if="(isExecutor === true && isPublisher === false) && taskForm.status === 'audit'" label="任务量(天):" prop="workload">
<span>{{taskForm.workload}}</span>
</el-form-item>
<el-form-item v-if="taskForm.status !== 'audit'" label="任务量(天):" prop="workload">
<span v-if="taskForm.status !== 'audit'">{{taskForm.workload}}</span>
</el-form-item>
<el-form-item v-if="taskForm.status === 'finished'" label="结束时间:">
<span v-if="taskForm.status === 'finished'">{{taskForm.endTime}}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="任务开始时间:">
<span>{{taskForm.stateTime}}</span>
<!--<el-date-picker v-if="taskForm.status !== 'audit'" type="date" placeholder="选择日期" v-model="taskForm.startTime" style="width: 100%;"></el-date-picker>-->
</el-form-item>
<el-form-item label="组长:" >
<span>{{taskForm.executor.username}}</span>
<!--<el-select style="width: 100%;" v-model="taskForm.executor.id" placeholder="请选择组长">-->
<!--<el-option-->
<!--v-for="item in leaderOptions"-->
<!--:key="item.id"-->
<!--:label="item.username"-->
<!--:value="item.id">-->
<!--</el-option>-->
<!--</el-select>-->
</el-form-item>
<el-form-item v-if="(taskForm.status === 'audit' && isPublisher === true) || ((isPublisher === true || isExecutor === true) && (taskForm.status === 'review' || taskForm.status === 'finished'))" label="考评分数:" prop="workCoefficient">
<span v-if="taskForm.status === 'review' || taskForm.status === 'finished'">{{taskForm.workCoefficient}}</span>
<el-input v-if="isPublisher === true && taskForm.status === 'audit'" v-model.number="taskForm.workCoefficient"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="预计完成时间:" prop="completeTime">
<span>{{taskForm.completeTime}}</span>
<!--<el-date-picker type="date" placeholder="选择日期" v-model="taskForm.endTime" style="width: 100%;"></el-date-picker>-->
</el-form-item>
<el-form-item label="组员:">
<span v-if="isPublisher === false">
<span v-for="(item, index) in taskForm.crewList" :key="index">{{item.username}}<span v-show="index !== (taskForm.crewList.length - 1)"></span></span>
</span>
<el-select v-if="isPublisher === true && taskForm.status === 'ongoing'" style="width: 100%;" v-model="taskForm.crewList" multiple placeholder="请选择">
<el-option
v-for="item in memberOptions"
:key="item.id"
:label="item.username"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item v-if="taskForm.status === 'audit' || taskForm.status === 'review' || taskForm.status === 'finished' || taskForm.status === 'delete'" label="提交时间:">
<span v-if="taskForm.status === 'audit' || taskForm.status === 'review' || taskForm.status === 'finished' || taskForm.status === 'delete'">{{taskForm.submitTime}}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="任务创建时间:">
<span>{{taskForm.createTime}}</span>
<!--<el-date-picker type="date" placeholder="选择日期" v-model="taskForm.endTime" style="width: 100%;"></el-date-picker>-->
</el-form-item>
<el-form-item label="任务状态:">
<span>{{$common.statusName(taskForm.status)}}</span>
</el-form-item>
<el-form-item v-if="taskForm.status === 'review' || taskForm.status === 'finished' || taskForm.status === 'delete'" label="审核时间:">
<span v-if="taskForm.status === 'review' || taskForm.status === 'finished' || taskForm.status === 'delete'">{{taskForm.auditTime}}</span>
</el-form-item>
</el-col>
</el-row>
<div style="padding: 10px 35px;">
<div style="padding: 10px 0px;font-size: 14px;">任务内容</div>
<div style="padding: 20px 20px;height: 600px;border: 1px solid #dedede;overflow-y: auto;" v-html="taskForm.content">{{taskForm.content}}</div>
<!--<editor-bar v-model="content" :isClear="isClear" @change="change"></editor-bar>-->
</div>
<div class="upload-container">
<div style="margin-left: 35px;margin-top: 20px;" class="upload-file">
<el-button size="small" @click="openFileTaskDialog()">查看附件</el-button>
<!--<button>添加附件</button>-->
</div>
</div>
</el-form>
</div>
<div style="text-align: center;height: 10%;margin-top: 20px;">
<el-button v-show="isPublisher === true && (taskForm.status === 'audit' || taskForm.status === 'ongoing')" type="primary" @click="openChangeTaskDialog('taskForm')">修改</el-button>
<el-button v-show="isExecutor === true && taskForm.status === 'ongoing' && isCanSubmit === true" type="primary" @click="openSubmitTaskDialog()">提交</el-button>
<el-button v-show="isExecutor === true && isCanBreakDown && taskForm.status === 'ongoing'" type="primary" @click="breakDownTask()">分解</el-button>
<el-button v-show="isExecutor === true && taskForm.status === 'audit'" type="primary" @click="openWithdrawTaskDialog()">撤回</el-button>
<el-button v-show="((isPublisher === true && isEditEva === true) || isExecutor === true) && taskForm.status === 'review'" type="primary" @click="openEvaTaskDialog()">考评</el-button>
<el-button v-show="taskForm.status === 'finished' || taskForm.status === 'delete'" type="primary" @click="openViewTaskEvaDialog()">查看考评</el-button>
<el-button v-show="isPublisher === true && (taskForm.status === 'audit' || taskForm.status === 'finished') && taskForm.status !== 'delete'" type="primary" @click="openDeleteTaskDialog('taskForm')">删除</el-button>
<el-button v-show="isPublisher === true && taskForm.status === 'audit'" @click="reviewBtnClick('review', 'taskForm')" type="primary" >审核通过</el-button>
<el-button v-show="isPublisher === true && taskForm.status === 'audit'" @click="reviewBtnClick('ongoing', 'taskForm')" type="primary" >审核不通过</el-button>
</div>
<div>
</div>
<history :showHistoryDialog="showHistoryDialog" :historyData="historyDatas" @close="closeHistory()"></history>
<div>
<el-dialog title="任务修改" :show-close="false" :append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false" :lock-scroll="true" :visible.sync="dialogTaskChangeVisible">
<div slot="title" class="header-title">
<span class="dialogHeader">任务修改</span>
<img @click="closeChangeTaskDialog()" class="dialogHeaderClose" src="../assets/images/modal-gb.png" />
</div>
<div style="text-align: left;margin-top: 80px;">
<span >修改说明:</span>
<el-input
type="textarea"
:rows="2"
style="margin-top: 30px;"
placeholder="请输入修改说明"
v-model="changeTaskTextarea">
</el-input>
</div>
<div class="btnStyle">
<el-button type="primary" @click="changeTaskSubmit()">确定</el-button>
</div>
</el-dialog>
</div>
<div>
<el-dialog title="审核不通过" :show-close="false" :append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false" :lock-scroll="true" :visible.sync="dialogTaskFailVisible">
<div slot="title" class="header-title">
<span class="dialogHeader">审核不通过</span>
<img @click="closeFailTaskDialog()" class="dialogHeaderClose" src="../assets/images/modal-gb.png" />
</div>
<div style="text-align: left;margin-top: 80px;">
<span >审核不通过说明:</span>
<el-input
type="textarea"
:rows="2"
style="margin-top: 30px;"
placeholder="请输入审核不通过说明"
v-model="failTaskTextarea">
</el-input>
</div>
<div class="btnStyle">
<el-button type="primary" @click="failTaskSubmit('ongoing')">确定</el-button>
</div>
</el-dialog>
</div>
<div>
<el-dialog title="任务提交" :show-close="false" :append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false" :lock-scroll="true" :visible.sync="dialogTaskSubmitVisible">
<div slot="title" class="header-title">
<span class="dialogHeader">任务提交</span>
<img @click="closeSubmitTaskDialog()" class="dialogHeaderClose" src="../assets/images/modal-gb.png" />
</div>
<div style="text-align: left;margin-top: 80px;">
<span >提交说明:</span>
<el-input
type="textarea"
:rows="2"
style="margin-top: 30px;"
placeholder="请输入提交说明"
v-model="submitTaskTextarea">
</el-input>
</div>
<div class="btnStyle">
<el-button type="primary" @click="statusTaskSubmit('audit', '提交')">确定</el-button>
</div>
</el-dialog>
</div>
<div>
<el-dialog title="任务撤回" :show-close="false" :append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false" :lock-scroll="true" :visible.sync="dialogTaskWithdrawVisible">
<div slot="title" class="header-title">
<span class="dialogHeader">任务撤回</span>
<img @click="closeWithdrawTaskDialog()" class="dialogHeaderClose" src="../assets/images/modal-gb.png" />
</div>
<div style="text-align: left;margin-top: 80px;">
<span >撤回说明:</span>
<el-input
type="textarea"
:rows="2"
style="margin-top: 30px;"
placeholder="请输入提交说明"
v-model="withdrawTaskTextarea">
</el-input>
</div>
<div class="btnStyle">
<el-button type="primary" @click="statusTaskSubmit('ongoing', '撤回')">确定</el-button>
</div>
</el-dialog>
</div>
<div>
<el-dialog title="任务评价" :show-close="false" :append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false" :lock-scroll="true" :visible.sync="dialogTaskEvaVisible">
<div slot="title" class="header-title">
<span class="dialogHeader">任务评价</span>
<img @click="closeEvaTaskDialog()" class="dialogHeaderClose" src="../assets/images/modal-gb.png" />
</div>
<div style="text-align: left;">
<el-form ref="evaForm" :rules="evaRules" :model="evaForm" label-width="100px">
<!--<el-form-item v-if="isPublisher === true || (isExecutor === true && isEditEva === true) || (isPublisher === false && isExecutor === false)" label="自我评分" >-->
<!--&lt;!&ndash;prop="score1"&ndash;&gt;-->
<!--<el-input :disabled="isPublisher === true || (isExecutor === true && isEditEva === true)" v-model="evaForm.score1"></el-input>-->
<!--</el-form-item>-->
<div>
<el-form-item v-if="isEditEva === false" label="自我评分" prop="score1">
<el-input v-if="isPublisher === false && isExecutor === true" v-model.number="evaForm.score1"></el-input>
<el-input v-if="isPublisher === true && isExecutor === true" v-model.number="evaForm.score1"></el-input>
<el-input v-if="isPublisher === true && isExecutor === false" disabled v-model.number="evaForm.score1"></el-input>
</el-form-item>
<el-form-item v-if="isEditEva === true" label="自我评分">
<el-input disabled v-model.number="evaForm.score1"></el-input>
</el-form-item>
<el-form-item v-if="isEditEva === false" label="自我评价">
<el-input v-if="isPublisher === true && isExecutor === false" disabled type="textarea" v-model="evaForm.comments1"></el-input>
<el-input v-if="isPublisher === true && isExecutor === true" type="textarea" v-model="evaForm.comments1"></el-input>
<el-input v-if="isPublisher === false && isExecutor === true" type="textarea" v-model="evaForm.comments1"></el-input>
</el-form-item>
<el-form-item v-if="isEditEva === true" label="自我评价">
<el-input disabled type="textarea" v-model="evaForm.comments1"></el-input>
</el-form-item>
<el-form-item v-if="isEditEva === false" label="发布者评分">
<el-input disabled v-model="evaForm.score2"></el-input>
</el-form-item>
<div v-if="isEditEva === true">
<el-form-item v-if="isPublisher === true && isExecutor === false" prop="score2" label="发布者评分">
<el-input v-model.number="evaForm.score2"></el-input>
</el-form-item>
<el-form-item v-if="isPublisher === true && isExecutor === true" prop="score2" label="发布者评分">
<el-input v-model.number="evaForm.score2"></el-input>
</el-form-item>
<el-form-item v-if="isPublisher === false && isExecutor === true" label="发布者评分">
<el-input disabled v-model="evaForm.score2"></el-input>
</el-form-item>
</div>
<el-form-item v-if="isEditEva === false" label="发布者评价">
<el-input type="textarea" disabled v-model="evaForm.comments2"></el-input>
</el-form-item>
<el-form-item v-if="isEditEva === true" label="发布者评价">
<el-input type="textarea" v-if="isPublisher === true && isExecutor === false" v-model="evaForm.comments2"></el-input>
<el-input type="textarea" v-if="isPublisher === true && isExecutor === true" v-model="evaForm.comments2"></el-input>
<el-input type="textarea" v-if="isPublisher === false && isExecutor === true" disabled v-model="evaForm.comments2"></el-input>
</el-form-item>
</div>
<!--<div v-if="isEditEva === false && isExecutor === false">-->
<!--1111-->
<!--<el-form-item label="自我评分">-->
<!--<el-input disabled v-model="evaForm.score1"></el-input>-->
<!--</el-form-item>-->
<!--<el-form-item label="自我评价">-->
<!--<el-input disabled type="textarea" v-model="evaForm.comments1"></el-input>-->
<!--</el-form-item>-->
<!--<el-form-item label="发布者评分">-->
<!--<el-input disabled v-model="evaForm.score2"></el-input>-->
<!--</el-form-item>-->
<!--<el-form-item label="发布者评价">-->
<!--<el-input type="textarea" disabled v-model="evaForm.comments2"></el-input>-->
<!--</el-form-item>-->
<!--</div>-->
<!--<div v-if="isEditEva === false && isExecutor === true">-->
<!--2222-->
<!--<el-form-item label="自我评分" prop="score1">-->
<!--<el-input v-model.number="evaForm.score1"></el-input>-->
<!--</el-form-item>-->
<!--<el-form-item label="自我评价">-->
<!--<el-input type="textarea" v-model="evaForm.comments1"></el-input>-->
<!--</el-form-item>-->
<!--<el-form-item label="发布者评分">-->
<!--<el-input disabled v-model="evaForm.score2"></el-input>-->
<!--</el-form-item>-->
<!--<el-form-item label="发布者评价">-->
<!--<el-input type="textarea" disabled v-model="evaForm.comments2"></el-input>-->
<!--</el-form-item>-->
<!--</div>-->
<!--<div v-if="isEditEva === true && isPublisher === false">-->
<!--3333-->
<!--<el-form-item label="自我评分">-->
<!--<el-input disabled v-model="evaForm.score1"></el-input>-->
<!--</el-form-item>-->
<!--<el-form-item label="自我评价">-->
<!--<el-input disabled type="textarea" v-model="evaForm.comments1"></el-input>-->
<!--</el-form-item>-->
<!--<el-form-item label="发布者评分">-->
<!--<el-input disabled v-model="evaForm.score2"></el-input>-->
<!--</el-form-item>-->
<!--<el-form-item label="发布者评价">-->
<!--<el-input type="textarea" disabled v-model="evaForm.comments2"></el-input>-->
<!--</el-form-item>-->
<!--</div>-->
<!--<div v-if="isEditEva === true && isPublisher === true">-->
<!--4444-->
<!--<el-form-item label="自我评分">-->
<!--<el-input disabled v-model="evaForm.score1"></el-input>-->
<!--</el-form-item>-->
<!--<el-form-item label="自我评价">-->
<!--<el-input disabled type="textarea" v-model="evaForm.comments1"></el-input>-->
<!--</el-form-item>-->
<!--<el-form-item label="发布者评分" prop="score2">-->
<!--<el-input v-model.number="evaForm.score2"></el-input>-->
<!--</el-form-item>-->
<!--<el-form-item label="发布者评价">-->
<!--<el-input type="textarea" v-model="evaForm.comments2"></el-input>-->
<!--</el-form-item>-->
<!--</div>-->
</el-form>
<div style="text-align: center;">
<el-button type="primary" @click="submitEvaDialog('evaForm')">确定</el-button>
<!--<el-button type="primary" @click="closeEvaTaskDialog()">取消</el-button>-->
</div>
</div>
</el-dialog>
</div>
<div>
<el-dialog title="查看任务评价" :show-close="false" :append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false" :lock-scroll="true" :visible.sync="dialogViewTaskEvaVisible">
<div slot="title" class="header-title">
<span class="dialogHeader">查看任务评价</span>
<img @click="closeViewTaskEvaDialog()" class="dialogHeaderClose" src="../assets/images/modal-gb.png" />
</div>
<div style="text-align: left;">
<ul class="viewEvaLi">
<li>自我评分:{{evaForm.score1}}</li>
<li>自我评价:{{evaForm.comments1}}</li>
<li>发布者评分:{{evaForm.score2}}</li>
<li>发布者评价:{{evaForm.comments2}}</li>
</ul>
</div>
</el-dialog>
</div>
<div>
<el-dialog title="查看附件" :show-close="false" :append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false" :lock-scroll="true" :visible.sync="dialogViewTaskFileVisible">
<div slot="title" class="header-title">
<span class="dialogHeader">查看附件</span>
<img @click="closeFileTaskDialog()" class="dialogHeaderClose" src="../assets/images/modal-gb.png" />
</div>
<div style="text-align: left;">
<ul class="viewFileLi">
<li v-for="(item,index) in taskForm.attachment" :key="index">
<div style="text-align: center;">
<img v-show="item.suffix === 'pdf'" src="../assets/images/yd-pdf.png"/>
<img v-show="item.suffix === 'png'" src="../assets/images/yd-png.png"/>
<img v-show="item.suffix === 'rar'" src="../assets/images/yd-rar.png"/>
<img v-show="item.suffix === 'jpg'" src="../assets/images/yd-jpg.png"/>
<img v-show="item.suffix === 'tp'" src="../assets/images/yd-tp.png"/>
<img v-show="item.suffix === 'word'" src="../assets/images/yd-word.png"/>
<img v-show="item.suffix === 'xml'" src="../assets/images/yd-xml.png"/>
<img v-show="item.suffix === 'zip'" src="../assets/images/yd-zip.png"/>
<div>{{item.name}}</div>
</div>
</li>
</ul>
</div>
</el-dialog>
</div>
<div>
<el-dialog title="任务删除" :show-close="false" :append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false" :lock-scroll="true" :visible.sync="dialogDeleteTaskVisible">
<div slot="title" class="header-title">
<span class="dialogHeader">任务删除</span>
<img @click="closeDeleteTaskDialog()" class="dialogHeaderClose" src="../assets/images/modal-gb.png" />
</div>
<div style="text-align: left;margin: 0 30px;">
<div style="margin-bottom: 30px;">是否需要纳入统计:</div>
<el-checkbox label="个人工作量" v-model="deleteCheck">个人工作量</el-checkbox>
<el-checkbox label="任务工作量" v-model="deleteCheck">任务工作量</el-checkbox>
<div style="text-align: left;margin-top: 50px;">
<span >删除说明:</span>
<el-input
type="textarea"
:rows="2"
style="margin-top: 30px;"
placeholder="请输入删除说明"
v-model="deleteTextarea">
</el-input>
</div>
<div style="text-align: center;margin-top: 30px;">
<el-button type="primary" @click="submitDeleteDialog()">确定</el-button>
</div>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
import History from '../components/taskHistory';
export default {
name: "TaskDetails",
//import引入的组件需要注入到对象中才能使用
components: { History },
data () {
let checkScore1 = (rule, value, callback) => {
if (!value) {
return callback(new Error('评分不能为空'));
}
if (value > this.taskForm.workCoefficient) { // * 100
callback(new Error(`根据考评分数,评分不能超过${this.taskForm.workCoefficient}`)); // * 100
} else if (value < 50) {
callback(new Error('根据考评分数,评分不能低于50'));
} else {
callback();
}
};
let workScore = (rule, value, callback) => {
if (!value) {
return callback(new Error('考评系数不能为空'));
}
if (value < 50) {
callback(new Error('考评系数不能低于50'));
} else {
callback();
}
};
let workLoadScore = (rule, value, callback) => {
if (!value) {
return callback(new Error('任务量不能为空'));
} else if(value.toString().length > 4) {
return callback(new Error('长度在 4 个字符之内'));
} else {
callback();
}
};
//这里存放数据
return {
showHistoryDialog: false, // 查看历史弹框
dialogTaskChangeVisible:false, // 修改弹框
dialogTaskSubmitVisible: false, // 提交弹框
dialogTaskEvaVisible: false, // 考评弹框
dialogTaskWithdrawVisible: false, // 撤回弹框
dialogViewTaskEvaVisible: false, // 查看考评弹框
dialogViewTaskFileVisible: false, // 查看附件弹框
dialogDeleteTaskVisible: false, // 删除任务弹框
dialogTaskFailVisible: false, // 审核不通过弹框
taskForm: {
attachment: [],
completeTime: '',
content: '',
createTime: '',
crewList: [],
endTime: '',
executor: '',
id: '',
publisher: '',
pworkload: 1,
stateTime: '',
status: '',
superiorId: '',
title: '',
updateTime: '',
workCoefficient: 0,
workload: 10,
workloadCount: 1,
},
rules: {
executor: [
{ required: true, message: '请选择组长', trigger: 'change' }
],
crewList: [
{ type: 'array', required: true, message: '请选择组员', trigger: 'change' },
],
workCoefficient: [
{ validator: workScore, trigger: 'blur' },
{ type: 'number', message: '考评分数必须为数字值'}
],
workload: [
{ validator: workLoadScore, trigger: 'blur' },
// { required: true, message: '工作量不能为空'},
{ type: 'number', message: '任务量必须为数字值'},
]
},
changeTaskTextarea: '',
submitTaskTextarea: '',
withdrawTaskTextarea: '',
failTaskTextarea: '', // 审核不通过
evaForm:{
score1: '',
score2: '',
comments2: '',
comments1: '',
endWorkLoad: '',
workId: '',
id: null,
userId: ''
},
evaRules: {
score1: [
{ required: true, validator: checkScore1, trigger: 'blur' },
{ type: 'number', message: '评分必须为数字值'}
// { required: true, message: '请填写自我评分', trigger: 'blur' }
],
score2: [
{ required: true, validator: checkScore1, trigger: 'blur' },
{ type: 'number', message: '评分必须为数字值'}
// { validator: validcodeScore2, trigger: 'blur' }
// { required: true, message: '请填写发布者评分', trigger: 'blur' }
],
},
leaderOptions: [],
memberOptions: [],
isPublisher: false, // 判断是否是发布者
// isGroupLeader: false, // 是否是组长
// isCarriedOut: false, // 是否是执行者
isExecutor: false, // 是否是执行者
isCanBreakDown: false, // 是否能分解任务
isEditEva: false, // 是否提交了评价
hasAuthority: false, // 是否有分解权限
isCanSubmit: false, // 判断是否可以提交
userDetail: '', // 当前用户的信息
taskListData: '',
historyDatas: [], // 历史数据
deleteCheck:['个人工作量', '任务工作量'], // 删除多选框
deleteTextarea: '', // 删除说明
showScore2Tip: false,
showScore1Tip: false,
workScores: 0,
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
getUserById(val) {
this.$axios.getUserById(val).then((res) => {
console.log(res)
if (res.request.status === 200) {
this.leaderOptions = res.data;
this.memberOptions = res.data;
}
})
},
getDetailsTask(val) {
this.$axios.getWorkDetails(val).then((res) => {
console.log(res)
if (res.request.status === 200) {
let postData = JSON.parse(JSON.stringify(res.data));
if ((postData.workCoefficient.toString()).indexOf(".") > -1) {
postData.workCoefficient = (Math.round(postData.workCoefficient*100)/100) * 100;
} else {
if ((postData.workCoefficient.toString()).length < 2) {
postData.workCoefficient = (Math.round(postData.workCoefficient*100)/100) * 100;
} else {
postData.workCoefficient = JSON.parse(JSON.stringify(postData.workCoefficient));
}
}
// postData.workCoefficient = (Math.round(postData.workCoefficient*100)/100) * 100;
this.workScores = JSON.parse(JSON.stringify(postData.workCoefficient));
this.taskForm = postData;
let arr = [];
if (res.data.publisher.id === this.userDetail.id) {
this.isPublisher = true;
if (postData.status === 'ongoing' || postData.status === 'unpublished') {
if (postData.crewList !== null && postData.crewList.length > 0) {
postData.crewList.forEach((v,i)=> {
arr.push(v.id);
})
this.taskForm.crewList = arr;
}
let dataUser = JSON.parse(JSON.stringify(this.leaderOptions));
console.log(dataUser)
if (res.data.crewList !== null && res.data.crewList.length > 0) {
dataUser.push(...res.data.crewList);
console.log(dataUser)
}
// console.log()
let dataUser2 = JSON.parse(JSON.stringify(dataUser));
for(let i = 0; i < dataUser2.length; i++) {
for(let j = i + 1; j < dataUser2.length ; j++) {
if(dataUser2[i].id === dataUser2[j].id) {
dataUser2.splice(j, 1)
j--;
}
}
}
// let dataUser2 = Array.from(new Set(dataUser));
this.leaderOptions = dataUser2;
this.memberOptions = dataUser2;
}
} else {
this.isPublisher = false;
}
if (res.data.executor.id === this.userDetail.id) {
this.isExecutor = true;
} else {
this.isExecutor = false;
}
if (this.isExecutor === true) {
if ((postData.crewList !== null && postData.crewList.length > 0) || (this.userDetail.roles !== null && this.userDetail.roles.length > 0 && this.userDetail.roles[0].authorities.findIndex(item => item.name === '分解任务') > -1)) {
this.isCanBreakDown = true;
} else {
this.isCanBreakDown = false
}
} else {
this.isCanBreakDown = false;
}
// if (res.data.crewList.length > 0) {
// let index = res.data.crewList.findIndex(item => item.id === this.userDetail.id);
// if (index > 0) {
// this.isCarriedOut = true;
// } else {
// this.isCarriedOut = false;
// }
// }
// if (this.userDetail.roles.length > 0) {
// let index = this.userDetail.roles[0].authorities.findIndex(item => item.name === '分解任务');
// console.log(index)
// if (index > -1) {
// this.hasAuthority = true;
// }
// } else {
// this.hasAuthority = false;
// }
}
this.$axios.putCanSubmitTask(res.data.id).then((res) => {
console.log(res)
if (res.status === 200) {
console.log(res.data.isNotCommit === '1')
this.isCanSubmit = res.data.isNotCommit === '1' ? true : false;
}
})
this.$axios.getScore(res.data.id).then((res) => {
console.log(res);
if (res.status === 200) {
if (res.data.score1 !== '') {
this.isEditEva = true;
} else {
this.isEditEva = false;
}
}
})
})
},
openHistory() {
this.$axios.getTaskHistory(this.taskListData.workId).then((res) => {
console.log(res)
if (res.request.status === 200) {
this.historyDatas = res.data;
}
})
this.showHistoryDialog = true;
},
closeHistory() {
this.showHistoryDialog = false;
},
closeChangeTaskDialog() {
this.dialogTaskChangeVisible = false;
},
openChangeTaskDialog(val) {
this.$refs[val].validate((valid) => {
if (valid) {
this.dialogTaskChangeVisible = true;
} else {
console.log('error submit');
return false;
}
});
},
closeSubmitTaskDialog() {
this.dialogTaskSubmitVisible = false;
},
openSubmitTaskDialog() {
this.dialogTaskSubmitVisible = true;
},
closeEvaTaskDialog() {
this.dialogTaskEvaVisible = false;
},
openEvaTaskDialog() {
// if (this.isPublisher === true) {
this.isEditEva = false;
this.$axios.getScore(this.taskForm.id).then((res) => {
console.log(res);
if (res.status === 200) {
// this.evaForm = res.data;
let newData = JSON.parse(JSON.stringify(res.data));
if (newData.score1 !== '') {
newData.score1 = parseInt(res.data.score1);
}
if (newData.score2 !== '' && newData.score2 !== null) {
newData.score2 = parseInt(res.data.score2);
} else {
newData.score2 = '';
}
this.evaForm = newData;
// if (this.isExecutor === true) {
if (res.data.score1 !== '') {
this.isEditEva = true;
} else {
this.isEditEva = false;
}
// }
}
})
// }
console.log(this.isEditEva)
this.dialogTaskEvaVisible = true;
},
closeFileTaskDialog() {
this.dialogViewTaskFileVisible = false;
},
openFileTaskDialog() {
this.dialogViewTaskFileVisible = true;
},
submitEvaDialog(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (this.isEditEva === false) {
let obj = JSON.parse(JSON.stringify(this.evaForm));
obj.score1 = obj.score1 + '';
obj.workId = this.taskListData.workId;
obj.userId = this.userDetail.id;
obj.score2 = null;
obj.comments2 = null;
obj.endWorkLoad = 1;
console.log(obj)
this.$axios.postScore(obj).then((res) => {
console.log(res)
if (res.status === 200) {
this.$message({
message: '评价任务成功!',
type: 'success'
});
this.$refs[formName].resetFields();
this.dialogTaskEvaVisible = false;
this.getDetailsTask(this.taskListData.workId);
}
})
} else {
if (this.isEditEva === true && this.isPublisher === false && this.isExecutor === true) {
this.dialogTaskEvaVisible = false;
return false;
}
let objs = JSON.parse(JSON.stringify(this.evaForm));
objs.score1 = objs.score1 + '';
objs.score2 = objs.score2 + '';
console.log(objs)
this.$axios.putScore(this.userDetail.id, objs).then((res) => {
console.log(res)
if (res.status === 200) {
let obj = {
msg: '',
userId: this.userDetail.id,
workId: this.taskForm.id,
status: 'finished',
re: ''
}
this.$axios.putTaskStatus(obj).then((res) => {
console.log(res)
if (res.status === 200) {
this.$message({
message: '评价任务成功!',
type: 'success'
});
// this.$refs['evaForm'].resetFields();
this.dialogTaskEvaVisible = false;
console.log(this.taskListData.workId)
this.getDetailsTask(this.taskListData.workId);
}
})
}
})
}
// if (this.isPublisher === true) {
// if (this.evaForm.score1 === '') {
// this.$message({
// message: '请先让任务执行者评分后在评价',
// type: 'warning'
// });
// return false;
// } else {
// this.$axios.putScore(this.userDetail.id, this.evaForm).then((res) => {
// console.log(res)
// if (res.status === 200) {
// let obj = {
// msg: '',
// userId: this.userDetail.id,
// workId: this.taskForm.id,
// status: 'finished'
// }
// this.$axios.putTaskStatus(obj).then((res) => {
// console.log(res)
// if (res.status === 200) {
// this.$message({
// message: '评价任务成功!',
// type: 'success'
// });
// this.$refs[formName].resetFields();
// this.dialogTaskEvaVisible = false;
// this.getDetailsTask(this.taskListData.workId);
// }
// })
// }
// })
// }
// } else {
// let obj = JSON.parse(JSON.stringify(this.evaForm));
// obj.workId = this.taskListData.workId;
// obj.userId = this.userDetail.id;
// obj.score2 = null;
// obj.comments2 = null;
// obj.endWorkLoad = 1;
// this.$axios.postScore(obj).then((res) => {
// console.log(res)
// if (res.status === 200) {
// this.$message({
// message: '评价任务成功!',
// type: 'success'
// });
// this.$refs[formName].resetFields();
// this.dialogTaskEvaVisible = false;
// this.getDetailsTask(this.taskListData.workId);
// }
// })
// }
} else {
console.log('error submit!!');
return false;
}
});
},
closeWithdrawTaskDialog() {
this.dialogTaskWithdrawVisible = false;
},
openWithdrawTaskDialog() {
this.dialogTaskWithdrawVisible = true;
},
closeViewTaskEvaDialog() {
this.dialogViewTaskEvaVisible = false;
},
openViewTaskEvaDialog() {
this.$axios.getScore(this.taskForm.id).then((res) => {
console.log(res);
if (res.status === 200) {
console.log(res.data)
let data = JSON.parse(JSON.stringify(res.data));
data.score1 = parseInt(data.score1);
data.score2 = parseInt(data.score2);
this.evaForm = data;
}
})
this.dialogViewTaskEvaVisible = true;
},
closeDeleteTaskDialog() {
this.dialogDeleteTaskVisible = false;
},
openDeleteTaskDialog() {
this.dialogDeleteTaskVisible = true;
},
changeTaskSubmit() {
// 修改任务确定
if (this.taskForm.status === 'ongoing') {
let obj = {
"msg": this.changeTaskTextarea,
"userid": this.userDetail.id,
"users": this.taskForm.crewList,
"workId": this.taskListData.workId
}
console.log(obj)
this.$axios.putTaskGroup(obj).then((res) => {
console.log(res)
if (res.request.status === 200) {
// if (res.data.id !== undefined) {
this.$message({
message: '修改任务成功!',
type: 'success'
});
// }
this.changeTaskTextarea = '';
this.dialogTaskChangeVisible = false;
this.getDetailsTask(this.taskListData.workId);
}
})
} else if (this.taskForm.status === 'audit') {
let obj = {
"msg": this.changeTaskTextarea,
"userId": this.userDetail.id,
"workCoefficient": parseFloat(this.taskForm.workCoefficient),
"workload": this.taskForm.workload,
"workId": this.taskListData.workId
}
this.$axios.putTaskWorkload(obj).then((res) => {
console.log(res)
if (res.request.status === 200) {
if (res.data.id !== undefined) {
this.$message({
message: '修改任务成功!',
type: 'success'
});
}
this.changeTaskTextarea = '';
this.dialogTaskChangeVisible = false;
this.getDetailsTask(this.taskListData.workId);
}
})
}
},
statusTaskSubmit(val, tip) {
let msg = '';
let re = '';
if (tip === '撤回') {
msg = this.withdrawTaskTextarea;
re = '1';
} else if (tip === '提交') {
msg = this.submitTaskTextarea;
re = '';
}
let obj = {
msg: msg,
status: val,
userId: this.userDetail.id,
workId: this.taskListData.workId,
re: re
}
this.$axios.putTaskStatus(obj).then((res) => {
console.log(res)
if (res.request.status === 200) {
// if (res.data.id !== undefined) {
this.$message({
message: tip + '任务成功!',
type: 'success'
});
this.submitTaskTextarea = '';
this.withdrawTaskTextarea = '';
this.dialogTaskSubmitVisible = false;
this.dialogTaskWithdrawVisible = false;
this.getDetailsTask(this.taskListData.workId);
// }
}
})
},
submitDeleteDialog() {
console.log(this.deleteCheck)
let pw = this.deleteCheck.includes('个人工作量') ? 1 : 0;
let wc =this.deleteCheck.includes('任务工作量') ? 1 : 0;
console.log(pw, wc)
let obj = {
msg: this.deleteTextarea,
personalWorkload: pw,
userId: this.userDetail.id,
workId: this.taskListData.workId,
workloadCount: wc
}
console.log(obj)
this.$axios.deleteTaskByParams(obj).then((res) => {
console.log(res)
if (res.request.status === 200) {
this.$message({
message: '删除任务完成!',
type: 'success'
});
this.deleteTextarea = '';
this.deleteCheck = ['个人工作量', '任务工作量'];
this.$router.push({name: 'viewTask'})
}
})
},
closeFailTaskDialog() {
this.dialogTaskFailVisible = false;
},
failTaskSubmit(val) {
let obj = {
msg: this.failTaskTextarea,
status: val,
workId: this.taskListData.workId,
userId: this.userDetail.id,
re: '2'
}
this.$axios.putTaskStatus(obj).then((res) => {
console.log(res)
this.$message({
message: '审核不通过!',
type: 'success'
});
this.getDetailsTask(this.taskListData.workId);
this.dialogTaskFailVisible = false;
this.failTaskTextarea = '';
})
},
reviewBtnClick(val, formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (val === 'ongoing') {
this.dialogTaskFailVisible = true;
} else {
let obj = {
msg: '',
status: val,
workId: this.taskListData.workId,
userId: this.userDetail.id,
re: ''
}
this.$axios.putTaskStatus(obj).then((res) => {
console.log(res)
this.$message({
message: '审核通过!',
type: 'success'
});
this.getDetailsTask(this.taskListData.workId);
})
}
} else {
console.log('error submit!!');
return false;
}
});
},
breakDownTask() {
console.log(this.taskForm)
let arr = [];
if (this.taskForm.crewList !== null && this.taskForm.crewList.length > 0) {
console.log(this.taskForm.crewList[0].username);
if (this.taskForm.crewList[0].username !== undefined) {
let crew = JSON.parse(JSON.stringify(this.taskForm.crewList));
let le = JSON.parse(JSON.stringify(this.leaderOptions));
console.log(crew)
console.log(le)
let arrPush = [...crew, ...le];
arr = Array.from(new Set(arrPush));
} else {
arr = JSON.parse(JSON.stringify(this.leaderOptions));
}
} else {
arr = JSON.parse(JSON.stringify(this.leaderOptions));
}
console.log(arr)
let obj = {
name: this.taskForm.title,
id: this.taskForm.id,
stateTime: this.taskForm.stateTime,
completeTime: this.taskForm.completeTime,
title: this.taskForm.title,
crewList: arr,
}
this.$store.commit('changeSuperior', {
superior: obj
})
this.$router.push({name: 'addTask'});
}
},
//生命周期 - 创建完成(可以访问当前this实例)
created () {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
this.taskListData = JSON.parse(this.$Base64.decode(localStorage.getItem('taskDetail')));
console.log(this.taskListData)
this.userDetail = JSON.parse(this.$Base64.decode(localStorage.getItem('login')));
this.getUserById(this.userDetail.id);
let that = this;
setTimeout(function () {
if (that.taskListData.workId !== undefined) {
that.getDetailsTask(that.taskListData.workId);
} else {
that.getDetailsTask(that.taskListData.id);
}
}, 100)
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
.viewEvaLi {
margin: 10px 30px;
}
.viewEvaLi li{
margin-top: 20px;
height: 80px;
line-height: 80px;
margin-left: 100px;
}
.btnStyle{
text-align: center;
margin-top: 30px;
}
.viewFileLi{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: left;
align-items: center;
}
.viewFileLi li{
margin-right: 40px;
cursor: pointer;
}
.titleSpans{
display: block;
width: 99%;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
</style>
<!-- 任务管理 -->
<template>
<div class='taskManage'>
<ul class="userAuthority">
<li class="addTask" v-show="showAddTask" @click="taskClick('addTask')">
<div class="nameManage">新建任务</div>
</li>
<li class="viewTask" @click="taskClick('viewTask')">
<div class="nameManage">查看任务</div>
</li>
<li class="viewTask" v-show="showDepartment" @click="taskClick('departmentTask')">
<div class="nameManage">部门任务</div>
</li>
</ul>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
name: "TaskManage",
//import引入的组件需要注入到对象中才能使用
components: {},
data () {
//这里存放数据
return {
showAddTask: false,
showDepartment: false,
};
},
//监听属性 类似于data概念
computed: {
},
//监控data中的数据变化
watch: {
},
//方法集合
methods: {
taskClick(val) {
let isDeaprtment = false;
if (val === 'viewTask') {
isDeaprtment = false;
} else {
isDeaprtment = true;
}
this.$store.commit('changeDepartment', {
department: isDeaprtment
})
this.$router.push({name: val});
}
},
//生命周期 - 创建完成(可以访问当前this实例)
created () {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
let data = JSON.parse(this.$Base64.decode(localStorage.getItem('login')));
console.log(data)
if (data.roles.length === 0) {
this.showAddTask = false;
this.showDepartment = false;
} else {
if (data.roles.length > 0) {
if (data.roles[0].authorities.findIndex(item => item.name === '分解任务') > -1) {
this.showAddTask = true;
}
if (data.roles[0].authorities.findIndex(item => item.name === '查看任务') > -1) {
this.showDepartment = true;
}
}
}
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
.taskManage{
width: 100%;
height: 100%;
background: #FFF;
}
.addTask{
background: url("../assets/images/yd.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.viewTask{
background: url("../assets/images/yd.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
</style>
<!-- 未发布任务修改 -->
<template>
<div class='unpublishedTask'>
<div>
<el-form :model="taskForm" :rules="rules" ref="taskForm" label-width="120px" class="demo-ruleForm">
<el-row :gutter="10">
<el-col :span="8">
<el-form-item label="任务名称" prop="title">
<el-input v-model="taskForm.title"></el-input>
</el-form-item>
<!--<el-form-item label="小组名称" prop="taskGroupName">-->
<!--<el-input v-model="taskForm.taskGroupName"></el-input>-->
<!--</el-form-item>-->
<el-form-item label="组长" prop="executor">
<el-select style="width: 100%;" v-model="taskForm.executor.id" placeholder="请选择组长">
<el-option
v-for="item in leaderOptions"
:key="item.id"
:label="item.username"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="发布者">
<span>{{taskForm.publisher.username}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="任务开始时间" prop="stateTime">
<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" type="datetime" :picker-options="startOption" placeholder="选择日期" v-model="taskForm.stateTime" style="width: 100%;"></el-date-picker>
</el-form-item>
<el-form-item label="组员">
<!--prop="crewList"-->
<el-select style="width: 100%;" v-model="taskForm.crewList" multiple placeholder="请选择组员">
<el-option
v-for="item in memberOptions"
: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="completeTime">
<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" type="datetime" :picker-options="completeOption" placeholder="选择日期" v-model="taskForm.completeTime" style="width: 100%;"></el-date-picker>
</el-form-item>
<el-form-item label="任务量(天)" prop="workload">
<el-input onkeyup="this.value=this.value.replace(/[^\d.]/g,'')" v-model="taskForm.workload"></el-input>
</el-form-item>
</el-col>
</el-row>
<div style="padding: 10px 35px;">
<div style="padding: 10px 0px;font-size: 14px;">任务内容</div>
<editor-bar v-model="taskForm.content" :isClear="isClear" @change="change"></editor-bar>
</div>
<div class="upload-container">
<div class="upload-file" style="margin-left: 35px;">
<el-upload
class="upload-demo"
ref="upload"
action="https://jsonplaceholder.typicode.com/posts/"
:http-request="handleChange"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:before-upload="beforeAvatarUpload"
:file-list="fileList"
:auto-load="false"
:limit="5">
<el-button size="small" @click="submitUpload">添加附件</el-button>
<!--<button>添加附件</button>-->
<div slot="tip">最多只能上传5个文件,否则请上传压缩包!</div>
</el-upload>
</div>
</div>
</el-form>
</div>
<div style="text-align: center;margin-top: 30px;">
<!--<el-button type="primary" @click="submitForm('taskForm','unpublished')">保存</el-button>-->
<el-button style="margin-left: 50px;margin-right: 40px;" type="primary" @click="submitForm('taskForm')">发布</el-button>
<!--<el-button @click="resetForm('taskForm')">重置</el-button>-->
</div>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
import EditorBar from '../components/taskEditer'
export default {
name: "unpublishedTask",
//import引入的组件需要注入到对象中才能使用
components: { EditorBar },
data () {
//这里存放数据
return {
taskForm: {
title: '',
publisher: '',
stateTime: '',
completeTime: '',
workload: '',
executor: '',
crewList: [],
attachment: [],
pworkload: 1,
status: '',
workCoefficient: 0,
workloadCount: 1,
content: ''
},
announcer: '',
startOption: {
// disabledDate: time => {
// if (this.taskForm.completeTime) {
// return (
// time.getTime() > new Date(this.taskForm.completeTime).getTime()
// )
// } else {
// // 不能大于当前日期
// return time.getTime() > Date.now()
// }
// }
},
completeOption: {
// disabledDate: time => {
// if (this.taskForm.startTime) {
// return (
// time.getTime() > Date.now() ||
// time.getTime() < new Date(this.taskForm.startTime).getTime() + 8.64e7 // 加- 8.64e7则表示包当天
// )
// } else {
// return time.getTime() < Date.now()
// }
// }
},
rules: {
title: [
{ required: true, message: '请输入任务名称', trigger: 'blur' },
],
stateTime: [
{ type: 'string', required: true, message: '请选择任务开始时间', trigger: 'change' }
],
completeTime: [
{ type: 'string', required: true, message: '请选择预计完成时间', trigger: 'change' }
],
executor: [
{ required: true, message: '请选择组长', trigger: 'change' }
],
crewList: [
{ type: 'array', required: true, message: '请选择组员', trigger: 'change' },
],
workload: [
{ required: true, message: '请输入任务量', trigger: 'blur' },
]
},
leaderOptions: [
{label: '李四', value: '李四'},{label: '王五', value: '王五'},{label: '赵六', value: '赵六'},
],
memberOptions: [
{label: '李四', value: '李四'},{label: '王五', value: '王五'},{label: '赵六', value: '赵六'},
{label: '周七', value: '周七'},{label: '刘八', value: '刘八'},{label: '陈九', value: '陈九'},
],
content: '',
isClear: false,
fileList: [], // 文件列表
attachmentsArr: [], // 存储多个附件对象
userLoginData: '',
detailData:'',
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
getUserById(val) {
this.$axios.getUserById(val).then((res) => {
console.log(res)
if (res.request.status === 200) {
this.leaderOptions = res.data;
this.memberOptions = res.data;
}
})
},
getDetailsTask(val) {
this.$axios.getWorkDetails(val).then((res) => {
console.log(res)
if (res.request.status === 200) {
this.taskForm = res.data;
this.fileList = res.data.attachment;
res.data.attachment.forEach((v,i) => {
let obj = {
id: v.id,
name: v.name
}
this.attachmentsArr.push(obj)
})
let arr = [];
if (res.data.crewList !== null) {
res.data.crewList.forEach((v,i)=> {
arr.push(v.id);
})
}
this.taskForm.crewList = arr;
}
})
},
change(val) {
console.log(val)
},
saveForm(formName) {
alert(this.content);
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
submitForm(formName) {
// alert(this.content);
this.$refs[formName].validate((valid) => {
if (valid) {
console.log(this.taskForm);
let data = JSON.parse(JSON.stringify(this.taskForm));
data.status = 'ongoing';
data.publisher = this.taskForm.publisher.id;
data.executor = this.taskForm.executor.id;
let arr = [];
this.attachmentsArr.forEach((v, i) => {
arr.push(v.id);
})
console.log(arr)
data.attachment = arr;
let obj = {
"remarks": "",
"userId": this.userLoginData.id,
'work': data
}
console.log(obj);
this.$axios.putTaskUnpushToGoing(obj).then((res) => {
console.log(res);
if (res.request.status === 200) {
if (res.data.id !== undefined) {
this.$message({
message: '发布任务成功!',
type: 'success'
});
this.$refs[formName].resetFields();
this.$router.push({name: 'viewTask'});
}
}
})
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
submitUpload() {
// this.$refs.uploaad.submit();
},
handleExceed (files, fileList) { // 最多上传5个附件,多出时提示
this.$message.warning(`最多只能上传 5 个文件`);
},
handleRemove (file, fileList) { // 删除附件
// for (let a = 0; a < this.attachmentsArr; a++) {
// if (file.name === this.attachmentsArr[a].name) {
// this.attachmentsArr.splice(a, 1);
// }
// }
let arr = JSON.parse(JSON.stringify(this.attachmentsArr));
arr.splice(arr.findIndex(item => item.name === file.name), 1);
this.attachmentsArr = arr;
console.log(this.attachmentsArr);
},
beforeAvatarUpload(file) { // 文件上传大小限制
let isLt2M = file.size / 1024 / 1024 < 300;
if (!isLt2M) {
this.$message({
message: '文件上传大小不能超过300M',
type: 'warning'
})
}
return isLt2M
},
handleChange (files) { // 文件上传
let Obj = {
"fileId": "",
"name": "",
"suffix": "",
"time": "",
"type": "",
"uploader": ""
}
// console.log(files)
let form = new FormData();
form.append('file', files.file);
this.$axios.postUpload(form).then(res => {
console.log(res)
if (res.status === 200) {
Obj.fileId = res.data.id;
this.$message({
message: '附件上传成功!',
type: 'success'
});
Obj.uploader = this.userLoginData.id;
Obj.name = files.file.name;
Obj.type = 'init';
let index = files.file.name.indexOf('.');
let s = files.file.name.substring(index + 1);
Obj.suffix = s;
let time = new Date();
let y = time.getFullYear();
let m = time.getMonth() + 1;
m = m < 10?'0' + m:m;
let d = time.getDate();
d = d < 10?'0' + d:d;
let h = time.getHours();
h = h < 10?'0' + h:h;
let mm = time.getMinutes();
mm = mm < 10?'0' + mm:mm;
let ss = time.getSeconds();
ss = ss < 10?'0' + ss:ss;
Obj.time = `${y}-${m}-${d} ${h}:${mm}:${ss}`;
// this.attachmentsArr.push(Obj); // 把多个附件添加到一个数组中,留到把附件添加到所属工作中时使用
// console.log(this.attachmentsArr);
this.$axios.postAttachmentOneByOne(Obj).then((res) => {
console.log(res)
if (res.status === 200) {
let data = {
id: res.data.id,
name: Obj.name
}
this.attachmentsArr.push(data)
}
})
console.log(this.attachmentsArr);
}
})
},
},
//生命周期 - 创建完成(可以访问当前this实例)
created () {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
console.log(this.$store.getters.getLoginData.loginData)
if (this.$store.getters.getLoginData.loginData !== undefined) {
this.userLoginData = this.$store.getters.getLoginData.loginData;
} else {
this.userLoginData = JSON.parse(this.$Base64.decode(localStorage.getItem('login')));
}
this.detailData = JSON.parse(this.$Base64.decode(localStorage.getItem('unpublished')));
// this.announcer = this.userLoginData.username;
// this.taskForm.publisher = this.userLoginData.id;
let that = this;
setTimeout(function () {
that.getUserById(that.userLoginData.id);
that.getDetailsTask(that.detailData.workId);
}, 200)
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
.unpublishedTask{
height: 99%;
padding: 10px 30px;
/*border: 1px solid #000;*/
}
/deep/ .text {
width: 100%;
height: 800px;
background: #ffffff;
color: #000;
/*padding: 0.119792rem 0 0 0.234375rem;*/
/*margin: 0.208333rem auto;*/
}
</style>
<!-- 查看任务 -->
<template>
<div class='viewTask'>
<el-tabs v-model="activeName" style="" type="border-card" @tab-click="handleClick">
<el-tab-pane name="first">
<span slot="label">
<!--<i class="el-icon-date"></i>-->
我的待办任务
<el-badge :is-dot="meCommissionUnread === 1" class="item"></el-badge>
</span>
<div class="cardDiv" style="height: 100%;overflow-y: auto;padding: 0px 30px;">
<el-card @click.native="taskDetails(item)" style="margin-bottom: 10px;" class="box-card cardShadow" v-for="(item,index) in dataList" :key="index">
<el-badge :is-dot="item.readState === 1" class="item">
<div class="taskContent">
<span class="">
<img class="itemImgStatus" v-show="item.workAttribution === 1" src="../assets/images/related.png"/>
<img class="itemImgStatus" v-show="item.workAttribution === 3" src="../assets/images/released.png"/>
<img class="itemImgStatus" v-show="item.workAttribution === 2" src="../assets/images/breakdown.png"/>
<img class="itemImgStatus" v-show="item.workAttribution === 4" src="../assets/images/receive.png"/>
</span>
<span :title="item.title" class="taskItem">任务名称:{{item.title}}</span>
<span :title="item.release" class="taskItem">发布者:{{item.release}}</span>
<span :title="$common.timeYMDHMSFilter(item.time)" class="taskItem">开始时间:{{$common.timeYMDHMSFilter(item.time)}}</span>
<span :title="item.executor" class="taskItem">执行人:{{item.executor}}</span>
<!--<span :title="item.crewList" class="taskItem">组员:{{item.crewList}}</span>-->
<span :title="item.status" class="taskItem">状态:{{$common.statusName(item.status)}}</span>
<span :title="item.latestNews" class="taskItem">最近一次操作:{{item.latestNews}}</span>
</div>
</el-badge>
</el-card>
</div>
</el-tab-pane>
<el-tab-pane name="four">
<span slot="label">
<!--<i class="el-icon-date"></i>-->
我的发布任务
<el-badge :is-dot="meReleaseUnread === 1" class="item"></el-badge>
</span>
<div class="cardDiv" style="height: 100%;overflow-y: auto;padding: 0px 30px;">
<el-card @click.native="taskDetails(item)" style="margin-bottom: 10px;" class="box-card cardShadow" v-for="(item,index) in dataList" :key="index">
<el-badge :is-dot="item.readState === 1" class="item">
<div class="taskContent">
<span class="">
<img class="itemImgStatus" v-show="item.workAttribution === 1" src="../assets/images/related.png"/>
<img class="itemImgStatus" v-show="item.workAttribution === 3" src="../assets/images/released.png"/>
<img class="itemImgStatus" v-show="item.workAttribution === 2" src="../assets/images/breakdown.png"/>
<img class="itemImgStatus" v-show="item.workAttribution === 4" src="../assets/images/receive.png"/>
</span>
<span :title="item.title" class="taskItem">任务名称:{{item.title}}</span>
<span :title="item.release" class="taskItem">发布者:{{item.release}}</span>
<span :title="$common.timeYMDHMSFilter(item.time)" class="taskItem">开始时间:{{$common.timeYMDHMSFilter(item.time)}}</span>
<span :title="item.executor" class="taskItem">执行人:{{item.executor}}</span>
<!--<span :title="item.crewList" class="taskItem">组员:{{item.crewList}}</span>-->
<span :title="item.status" class="taskItem">状态:{{$common.statusName(item.status)}}</span>
<span :title="item.latestNews" class="taskItem">最近一次操作:{{item.latestNews}}</span>
</div>
</el-badge>
</el-card>
</div>
</el-tab-pane>
<el-tab-pane name="three">
<span slot="label">
<!--<i class="el-icon-date"></i>-->
我的分解任务
<el-badge :is-dot="meResolveUnread === 1" class="item"></el-badge>
</span>
<div class="cardDiv" style="height: 100%;overflow-y: auto;padding: 0px 30px;">
<el-card @click.native="taskDetails(item)" style="margin-bottom: 10px;" class="box-card cardShadow" v-for="(item,index) in dataList" :key="index">
<el-badge :is-dot="item.readState === 1" class="item">
<div class="taskContent">
<span class="">
<img class="itemImgStatus" v-show="item.workAttribution === 1" src="../assets/images/related.png"/>
<img class="itemImgStatus" v-show="item.workAttribution === 3" src="../assets/images/released.png"/>
<img class="itemImgStatus" v-show="item.workAttribution === 2" src="../assets/images/breakdown.png"/>
<img class="itemImgStatus" v-show="item.workAttribution === 4" src="../assets/images/receive.png"/>
</span>
<span :title="item.title" class="taskItem">任务名称:{{item.title}}</span>
<span :title="item.release" class="taskItem">发布者:{{item.release}}</span>
<span :title="$common.timeYMDHMSFilter(item.time)" class="taskItem">开始时间:{{$common.timeYMDHMSFilter(item.time)}}</span>
<span :title="item.executor" class="taskItem">执行人:{{item.executor}}</span>
<!--<span :title="item.crewList" class="taskItem">组员:{{item.crewList}}</span>-->
<span :title="item.status" class="taskItem">状态:{{$common.statusName(item.status)}}</span>
<span :title="item.latestNews" class="taskItem">最近一次操作:{{item.latestNews}}</span>
</div>
</el-badge>
</el-card>
</div>
</el-tab-pane>
<el-tab-pane name="second">
<span slot="label">
<!--<i class="el-icon-date"></i>-->
我的相关任务
<el-badge :is-dot="meRelatedUnread === 1" class="item"></el-badge>
</span>
<div class="cardDiv" style="height: 100%;overflow-y: auto;padding: 0px 30px;">
<el-card @click.native="taskDetails(item)" style="margin-bottom: 10px;" class="box-card cardShadow" v-for="(item,index) in dataList" :key="index">
<el-badge :is-dot="item.readState === 1" class="item">
<div class="taskContent">
<span class="">
<img class="itemImgStatus" v-show="item.workAttribution === 1" src="../assets/images/related.png"/>
<img class="itemImgStatus" v-show="item.workAttribution === 3" src="../assets/images/released.png"/>
<img class="itemImgStatus" v-show="item.workAttribution === 2" src="../assets/images/breakdown.png"/>
<img class="itemImgStatus" v-show="item.workAttribution === 4" src="../assets/images/receive.png"/>
</span>
<span :title="item.title" class="taskItem">任务名称:{{item.title}}</span>
<span :title="item.release" class="taskItem">发布者:{{item.release}}</span>
<span :title="$common.timeYMDHMSFilter(item.time)" class="taskItem">开始时间:{{$common.timeYMDHMSFilter(item.time)}}</span>
<span :title="item.executor" class="taskItem">执行人:{{item.executor}}</span>
<!--<span :title="item.crewList" class="taskItem">组员:{{item.crewList}}</span>-->
<span :title="item.status" class="taskItem">状态:{{$common.statusName(item.status)}}</span>
<span :title="item.latestNews" class="taskItem">最近一次操作:{{item.latestNews}}</span>
</div>
</el-badge>
</el-card>
</div>
</el-tab-pane>
</el-tabs>
<div style="text-align: center;margin: 10px 0;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-size="pageSize"
layout="prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
import wsk from '../utils/webSocket';
import {mapGetters} from 'vuex';
export default {
name: "ViewTask",
//import引入的组件需要注入到对象中才能使用
components: {
// pagination
},
data () {
//这里存放数据
return {
activeName: 'first',
dataList: [],
currentPage: 1,
pageSize: 10,
total: 100,
userDetail: '',
meCommissionUnread: 0, // 待办未读
meRelatedUnread: 0, // 相关未读
meResolveUnread: 0, // 分解未读
meReleaseUnread: 0, // 发布未读
};
},
//监听属性 类似于data概念
computed: {
...mapGetters([
'getRealData',
])
},
//监控data中的数据变化
watch: {
getRealData: {
handler: function () {
let that = this;
setTimeout(function () {
that.socketDate();
},800)
},
deep: true
},
},
//方法集合
methods: {
firstSocket(val) {
this.$axios.postFirstWebSocket(val).then(() => {
// console.log(res)
})
},
handleClick(tab, event) {
console.log(this.activeName)
this.currentPage = 1;
if (tab.name === 'second') {
this.getDataListRelated();
} else if (tab.name === 'three') {
this.getDataListBreakDown();
} else if (tab.name === 'four') {
this.getDataListRelease();
} else {
this.getDataListUpcoming();
}
},
getDataListUpcoming() {
let obj = {
id: this.userDetail.id,
page: this.currentPage,
size: this.pageSize
}
this.$axios.postUpcoming(obj).then((res) => {
console.log(res)
this.total = res.data.count;
this.dataList = res.data.eventTitles;
})
},
getDataListRelease() {
let obj = {
id: this.userDetail.id,
page: this.currentPage,
size: this.pageSize
}
this.$axios.postRelease(obj).then((res) => {
console.log(res)
this.total = res.data.count;
this.dataList = res.data.eventTitles;
})
},
getDataListBreakDown() {
console.log(333)
let obj = {
id: this.userDetail.id,
page: this.currentPage,
size: this.pageSize
}
this.$axios.postBreakDown(obj).then((res) => {
console.log(res)
this.total = res.data.count;
this.dataList = res.data.eventTitles;
})
},
getDataListRelated() {
let obj = {
id: this.userDetail.id,
page: this.currentPage,
size: this.pageSize
}
this.$axios.postRelated(obj).then((res) => {
console.log(res)
this.total = res.data.count;
this.dataList = res.data.eventTitles;
})
},
taskDetails(val) {
// console.log(val)
let obj = {
eventId: val.workId,
id: this.userDetail.id,
readState: val.readState
}
this.$axios.postChangeReadStatus(obj).then((res) => {
console.log(res)
})
if (val.status === 'unpublished') {
// this.$store.commit('changeUnpublishedData', {
// unpublishedData: val
// });
localStorage.setItem('unpublished', this.$Base64.encode(JSON.stringify(val)));
this.$router.push({name: 'unpublishedTask'});
} else {
localStorage.setItem('taskDetail', this.$Base64.encode(JSON.stringify(val)));
this.$router.push({name: 'taskDetails'})
}
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.currentPage = val;
if (this.activeName === 'first') {
this.getDataListUpcoming();
} else if (this.activeName === 'second') {
this.getDataListRelated();
} else if (this.activeName === 'three') {
this.getDataListBreakDown();
} else {
this.getDataListRelease();
}
console.log(`当前页: ${val}`);
},
socketDate() {
let real = this.$store.getters.getRealData.realData;
console.log(real)
if (real !== undefined) {
this.meCommissionUnread = real.meCommissionUnread;
this.meRelatedUnread = real.meRelatedUnread;
this.meResolveUnread = real.meResolveUnread;
this.meReleaseUnread = real.meReleaseUnread;
}
},
},
//生命周期 - 创建完成(可以访问当前this实例)
created () {
let st = { // 将整个数据池传给了st
socks: this.$store
};
wsk.serverZAX(st);
let that = this;
window.addEventListener('beforeunload', e => { // 点击刷新触发
that.socks.commit('changeRealData', {
realData: {}
});
});
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
let data = JSON.parse(this.$Base64.decode(localStorage.getItem('login')));
this.userDetail = data;
this.firstSocket(data.id);
let that = this;
// let thisStore = this.$store;
setTimeout(function () {
that.getDataListUpcoming();
// wsk.serverZAX(thisStore);
}, 200)
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
.viewTask{
height: 99%;
padding: 0 50px;
}
/deep/ .el-tabs__nav {
white-space: nowrap;
position: relative;
transition: -webkit-transform .3s;
-webkit-transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
transition: transform .3s,-webkit-transform .3s;
float: left;
z-index: 2;
width: 25%;
}
/deep/ .el-tabs--border-card>.el-tabs__header .el-tabs__item {
-webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
transition: all .3s cubic-bezier(.645,.045,.355,1);
border: 1px solid transparent;
margin-top: -1px;
color: #909399;
width: 100%;
font-size: 26px;
text-align: center;
margin-left: 0px;
/*border: 1px solid #e4e7ed;*/
}
/deep/ .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
color: #409EFF;
background-color: #FFF;
border-right-color: #DCDFE6;
border-left-color: #DCDFE6;
}
.taskTitle{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.taskContent{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between ;
align-items: left;
height: 20px;
line-height: 20px;
position: relative;
}
.itemImgStatus{
position: absolute;
top: -0px;
left: -15px;
width: 20px;
}
.taskItem{
width: 16%;
font-size: 20px;
/*text-align: center;*/
white-space:nowrap;/* 规定文本是否折行 */
overflow: hidden;/* 规定超出内容宽度的元素隐藏 */
text-overflow: ellipsis;
}
/*.taskLeftItem{*/
/*width: 16%;*/
/*font-size: 20px;*/
/*text-align: left;*/
/*white-space:nowrap;!* 规定文本是否折行 *!*/
/*overflow: hidden;!* 规定超出内容宽度的元素隐藏 *!*/
/*text-overflow: ellipsis;*/
/*}*/
/*.taskRightItem{*/
/*width: 16%;*/
/*font-size: 20px;*/
/*text-align: center;*/
/*white-space:nowrap;!* 规定文本是否折行 *!*/
/*overflow: hidden;!* 规定超出内容宽度的元素隐藏 *!*/
/*text-overflow: ellipsis;*/
/*}*/
/deep/.el-card__body {
padding: 15px;
}
/deep/ .el-card.is-always-shadow {
box-shadow: none;
}
/deep/ .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover {
-webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.cardShadow:hover{
cursor: pointer;
box-shadow: 0 5px 15px 0 rgba(7,81,154,0.3) !important;
}
/deep/ .cardDiv .el-badge__content.is-fixed {
position: absolute;
top: -5px;
right: 0px;
-webkit-transform: translateY(-50%) translateX(100%);
transform: translateY(-50%) translateX(100%);
}
/deep/ .cardDiv .el-badge {
width: 100%;
position: relative;
vertical-align: middle;
display: inline-block;
}
</style>
<!-- 搜索列表 -->
<template>
<div class='searchList'>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
name: "searchList",
//import引入的组件需要注入到对象中才能使用
components: {},
data () {
//这里存放数据
return {};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {},
//生命周期 - 创建完成(可以访问当前this实例)
created () {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
},
beforeCreate () {
}, //生命周期 - 创建之前
beforeMount () {
}, //生命周期 - 挂载之前
beforeUpdate () {
}, //生命周期 - 更新之前
updated () {
}, //生命周期 - 更新之后
beforeDestroy () {
}, //生命周期 - 销毁之前
destroyed () {
}, //生命周期 - 销毁完成
activated () {
}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
</style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论