|
|
@@ -0,0 +1,290 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-steps v-if="stageList" :active="calcIndex + 1" align-center>
|
|
|
+ <el-step v-for="(item,index) in stageList" :key="item.sa_projstagetemp_stageid">
|
|
|
+ <div slot="description" class="item" @click="stageClick(index,item)">
|
|
|
+ <div :class="[
|
|
|
+ 'content',
|
|
|
+ {'enterStatus':item.active == 1},
|
|
|
+ {'active':clickCurrent == index}
|
|
|
+ ]">
|
|
|
+ <span class="title">{{item.stagename}}</span>
|
|
|
+ <span>{{calcTaskNumber(item)}}/{{item.work.length}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-step>
|
|
|
+ </el-steps>
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>阶段任务</span>
|
|
|
+ <el-button
|
|
|
+ style="border:1px solid #3874F6;color:#3874F6"
|
|
|
+ :disabled="currentData.active != 0"
|
|
|
+ size="mini"
|
|
|
+ @click="enterStage"
|
|
|
+ >进入当前阶段</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="task" v-for="(item,index) in currentData.work" :key="index">
|
|
|
+ <div class="task-header">
|
|
|
+ <span class="task-header-title">任务{{index+1}}</span>
|
|
|
+ <span class="task-header-status">未开始</span>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <p>任务名称:{{item.workname}}</p>
|
|
|
+ <p>任务分值:{{item.score}}</p>
|
|
|
+ <p>任务描述:{{item.remarks}}</p>
|
|
|
+ </div>
|
|
|
+ <div class="task-footer">
|
|
|
+ <div class="btn">
|
|
|
+ <el-button size="mini" :disabled="!currentData.active || item.finished != 0" @click="editBtn(item)">编辑</el-button>
|
|
|
+ <el-button size="mini" type="primary" v-if="item.finished == 0" :disabled="!currentData.active" @click="taskSuccess(item)">完成</el-button>
|
|
|
+ <el-button size="mini" type="info" v-else disabled>已完成</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+
|
|
|
+ <el-drawer
|
|
|
+ title="我是标题"
|
|
|
+ :visible.sync="dialogFormVisible"
|
|
|
+ direction="rtl"
|
|
|
+ :modal="true"
|
|
|
+ :show-close="false"
|
|
|
+ :withHeader="false"
|
|
|
+ size="30%">
|
|
|
+ <div class="flex-align-center flex-between container" style="border-bottom:1px solid #f1f2f3">
|
|
|
+ <div style="font-size:20px">编辑任务信息</div>
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" @click="saveEditInfo(dialogFormVisible = false)" size="small">提 交</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="container">
|
|
|
+ <el-descriptions title="任务信息">
|
|
|
+ <el-descriptions-item label="任务名称">{{ editData.workname }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="任务分值">{{ editData.score }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="任务描述">{{ editData.remarks }}</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ <el-descriptions title="完成描述" />
|
|
|
+ <el-input type="textarea" v-model="param.content.notes" placeholder="请填写完成的具体情况"></el-input>
|
|
|
+ <Editor :data="editData" @onSuccess="upLoad"/>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Editor from './components/Editor'
|
|
|
+export default {
|
|
|
+ components:{Editor},
|
|
|
+ props:['rowData'],
|
|
|
+ name: '',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ stageList:'',
|
|
|
+ clickCurrent: 0,
|
|
|
+ currentData:'',
|
|
|
+ dialogFormVisible:false,
|
|
|
+ editData:'',
|
|
|
+ param: {
|
|
|
+ "id": 20221024160202,
|
|
|
+ "content": {
|
|
|
+ "sa_project_stageworkid": "",
|
|
|
+ "notes":""
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ /* 计算当前进入阶段的index */
|
|
|
+ calcIndex () {
|
|
|
+ return this.stageList.indexOf(this.stageList.find(item => item.active == 1))
|
|
|
+ },
|
|
|
+ /* 计算当前阶段完成的任务个数 */
|
|
|
+ calcTaskNumber () {
|
|
|
+ return function (data) {
|
|
|
+ let num = 0
|
|
|
+ data.work.filter(item => {
|
|
|
+ if(item.finished != 0) {
|
|
|
+ num ++
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return num
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.getStageList(true)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ upLoad () {
|
|
|
+
|
|
|
+ },
|
|
|
+ editBtn (data) {
|
|
|
+ this.dialogFormVisible = true
|
|
|
+ this.editData = data
|
|
|
+ },
|
|
|
+ /* 保存编辑编辑信息 */
|
|
|
+ async saveEditInfo () {
|
|
|
+ this.param.content.sa_project_stageworkid = this.editData.sa_project_stageworkid
|
|
|
+ let res = await this.$api.requested(this.param)
|
|
|
+ this.tool.showMessage(res, () => {
|
|
|
+ this.dialogFormVisible = false
|
|
|
+ this.getStageList()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /* 获取阶段数据 */
|
|
|
+ async getStageList (no) {
|
|
|
+ let res = await this.$api.requested({
|
|
|
+ "id": 20221024102402,
|
|
|
+ "content": {
|
|
|
+ "sa_projectid": this.rowData.sa_projectid,
|
|
|
+ "sa_projstagetempid": this.rowData.sa_projstagetempid
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.stageList = res.data
|
|
|
+ /* 如果已有阶段 默认id释放 */
|
|
|
+ if(this.calcIndex) this.clickCurrent = null
|
|
|
+ if (no) {
|
|
|
+ this.currentData = this.stageList[0]
|
|
|
+ }
|
|
|
+ console.log(this.stageList);
|
|
|
+
|
|
|
+ },
|
|
|
+ /* 单击阶段 */
|
|
|
+ stageClick (val,item) {
|
|
|
+ this.clickCurrent = val == this.calcIndex ? null : val
|
|
|
+ console.log(this.clickCurrent);
|
|
|
+
|
|
|
+ this.currentData = item
|
|
|
+ },
|
|
|
+ /* 进入阶段 */
|
|
|
+ async enterStage () {
|
|
|
+ this.$alert('确定进入当前阶段吗?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ callback: async action => {
|
|
|
+ if (action == 'confirm') {
|
|
|
+ let res = await this.$api.requested({
|
|
|
+ "id": 20221024160102,
|
|
|
+ "content": {
|
|
|
+ "sa_projectid": this.currentData.sa_projectid,
|
|
|
+ "sa_projstagetempid": this.currentData.sa_projstagetempid,
|
|
|
+ "sa_project_stageid": this.currentData.sa_project_stageid
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(res);
|
|
|
+ this.tool.showMessage(res,() => {
|
|
|
+ this.getStageList(false)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /* 任务完成 */
|
|
|
+ async taskSuccess (data) {
|
|
|
+ this.$alert('确定完成当前任务吗?无法撤销', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ callback: async action => {
|
|
|
+ if (action == 'confirm') {
|
|
|
+ let res = await this.$api.requested({
|
|
|
+ "id": 20221024160302,
|
|
|
+ "content": {
|
|
|
+ "sa_project_stageworkid": data.sa_project_stageworkid
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(res);
|
|
|
+ this.tool.showMessage(res,() => {
|
|
|
+ this.getStageList(false)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .item {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .item .content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ align-items: center;
|
|
|
+ transform: skew(-20deg);
|
|
|
+ padding: 5px 10px;
|
|
|
+ background: #EEEEEE;
|
|
|
+ }
|
|
|
+ .item .content span:first-child {
|
|
|
+ color: #000000;
|
|
|
+ transform: skew(20deg);
|
|
|
+ }
|
|
|
+ .item .content span:last-child {
|
|
|
+ display: inline;
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 1px 10px;
|
|
|
+ border-radius: 30%;
|
|
|
+ color: #000000;
|
|
|
+ transform: skew(20deg);
|
|
|
+
|
|
|
+ }
|
|
|
+ .enterStatus {
|
|
|
+ background: #3874F6 !important;
|
|
|
+ color: #ffffff !important;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ background: #F2F5FF !important;
|
|
|
+ color: #3874F6 !important;
|
|
|
+ }
|
|
|
+ .box-card {
|
|
|
+ margin-top: 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .box-card .clearfix {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .box-card .clearfix .enter-stage {
|
|
|
+ padding: 4px 10px;
|
|
|
+ color: #3874F6;
|
|
|
+ border-radius: 5px;
|
|
|
+ border: 1px solid #3874F6;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .box-card .clearfix .enter-stage:hover {
|
|
|
+ background: #3874F6;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ /deep/.el-card__body {
|
|
|
+ padding: 0px 0px;
|
|
|
+ }
|
|
|
+ .box-card .task {
|
|
|
+ border-bottom: 15px solid #F5F5F5;
|
|
|
+ }
|
|
|
+ .box-card .task:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ .box-card .task .task-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px solid #cccccc;
|
|
|
+ padding: 0 20px;
|
|
|
+ line-height: 35px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ .box-card .task .content {
|
|
|
+ padding: 0 20px;
|
|
|
+ }
|
|
|
+ .box-card .task .task-footer {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row-reverse;
|
|
|
+ }
|
|
|
+ .box-card .task .task-footer .btn {
|
|
|
+ margin:0 10px 10px 0;
|
|
|
+ }
|
|
|
+</style>
|
qymljy