yos_web/src/HManagement/task/modules/edit.vue

<template>
  <div>
    <el-button v-show="tool.checkAuth($route.name,'update') && nowUserid === data.createuserid" size="mini" type="primary" @click="onShow(dialogTableVisible = true)">
        编 辑
    </el-button>
    <el-dialog title="编辑任务" append-to-body :visible.sync="dialogTableVisible" width="700px" @close="leaderShow = false;assistShow = false">
			<el-alert
				v-if="errormsg"
				class="normal-margin"
				:title="errormsg"
				type="error">
			</el-alert>
			<el-input class="normal-margin" v-model="form.title" placeholder="输入任务标题" type="text" show-word-limit maxlength="40" size="small"></el-input>
			<el-input  class="normal-margin" v-model="form.remarks" placeholder="输入任务内容" :autosize="{minRows:6}" type="textarea" show-word-limit maxlength="100" size="small"></el-input>
			<div class="flex-align-center flex-between normal-margin">
				<p class="task__label"><i class="el-icon-time"></i>&emsp;开始：</p>
				<el-date-picker
					v-model="form.starttime"
					type="date"
					placeholder="选择日期"
					value-format="yyyy-MM-dd"
					size="small">
				</el-date-picker>
				&emsp;- &emsp;
				<p class="task__label">结束：</p>
				<el-date-picker
					v-model="form.endtime"
					type="date"
					placeholder="选择日期"
					value-format="yyyy-MM-dd"
					size="small">
				</el-date-picker>
			</div>
			<div class="normal-margin flex-align-center">
				<p class="task__label"><i class="el-icon-bell"></i>&emsp;提醒时间&emsp;</p>
				<el-input :disabled="!form.endtime" v-model="form.remindday" size="small" style="width:90px"></el-input>
				<p>&emsp;天</p>
			</div>
			<!-- <div class="normal-margin">
				<p class="task__label"><i class="el-icon-upload2"></i>&emsp;上传附件</p>
				<upload
					ref="upload"
					:folderid="folderid"
					:bindData="bindData"
					type="button">
				</upload>
			</div> -->
			<!-- <div class="normal-margin">
				<p class="mt-10 task__label">关联项目/客户</p>
				<el-input placeholder="请输入内容" disabled v-model="input3" class="input-with-select" size="small">
					<el-select v-model="form.nat" slot="prepend" style="width:100px" placeholder="请选择">
						<el-option label="不关联" value="1"></el-option>
						<el-option label="项目" value="2"></el-option>
						<el-option label="客户" value="3"></el-option>
					</el-select>
				</el-input>
			</div> -->
			<div>
				<p class="mt-10 task__label">执行人员</p>
				<div class="flex-align-center flex-between">
					<el-popover
						placement="right"
						trigger="manual"
						width="400"
						v-model="leaderShow">
						<member ref="member" :param="param" :radio="true" @onSelect="setLeader" @onCancel="leaderShow = false"></member>
						<el-input placeholder="请输入内容" readonly v-model="leader.name" class="input-with-select" size="small" slot="reference" @focus="showMenber">
							<p slot="prepend">执行人</p>
						</el-input>
					</el-popover>
          <el-popover
              placement="right"
              trigger="manual"
              width="400"
              v-model="assistShow">
            <member ref="memberAssist" :param="paramAssist" :radio="false" :implement="implement" @onSelect="setAssist" @onCancel="assistShow = false"></member>
            <el-input placeholder="请输入内容" readonly v-model="assistPerson" class="input-with-select" size="small" slot="reference" @focus="showMenberAssist">
              <p slot="prepend">协助人</p>
            </el-input>
          </el-popover>

					<!-- &emsp;
					<el-input placeholder="请输入内容" v-model="input3" class="input-with-select" size="small">
						<p slot="prepend">协 办</p>
					</el-input> -->
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
        <el-button size="small" style="width:120px" @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="warning" size="small" style="width:120px" @click="validateInput">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import member from '@/template/menber/index.vue'

import upload from '@/components/upload/preview_upload.vue';
export default {
	props:['data'],
	components:{
		upload,
		member
	},
	data () {
		return {
      leaderShow:false,
      assistShow:false,
			dialogTableVisible:false,
			folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
			nowUserid: JSON.parse(sessionStorage.getItem('active_account')).userid,
			form:{
				"sys_taskid":0,
        "title":"",
        "remarks":"",
        "starttime":"",
        "remindday":0,
        "ownertable":"",
        "ownerid":0,
        "endtime":"",
				"leaderuserid":"",
        "team":{
          "justuserids":true,
          "userids":[],
        }
			},
			// 查询可选择人员参数
			param:{
        id:'20221018122201',
        content: {
          "ownertable":'sys_task',
          "ownerid":0,
          "pageSize":20,
          "where":{
            "condition":"",
            "withoutselect":0,

          }
        }
      },
      paramAssist:{
        id:'20221018122201',
        content: {
          "ownertable":'sys_task',
          "ownerid":0,
          "pageSize":20,
          "where":{
            "condition":"",
            "withoutselect":0,

          }
        }
      },

			errormsg:'',
			bindData:{},
			leader:{},
      assistPerson:'',
      assist:[],
      implement:''
		}
	},
	methods:{
		onShow () {
			this.form = Object.assign({},this.form,this.data)
			this.leader = this.data.leader[0]?this.data.leader[0]:''
      this.implement = this.data.leader[0].userid
      this.assistList(this.data.sys_taskid)
		},
		validateInput () {
			if (!this.form.title) {
				this.errormsg = '请输入标题'
				return false
			} else if (!this.form.starttime) {
				this.errormsg = '请选择开始日期'
				return false
			} else {
				this.submit()
			}
		},
		setLeader (val) {
			this.leader = val[0]
			this.form.leaderuserid = val[0].userid
      this.implement = this.form.leaderuserid
			this.leaderShow = false
		},
    setAssist (val) {
      console.log(val)
      this.assistPerson = ''
      this.assist = []
      val.forEach((item,index)=>{
        if (index === 0){
          this.assistPerson = item.name
        }else {
          this.assistPerson = this.assistPerson + ',' + item.name
        }
        this.assist[index] = item.userid
      })
      this.assistShow = false
    },
		async submit () {
      this.form.team.userids = this.assist
			const res = await this.$api.requested({
        "id": 20221211112101,
        "content":this.form
      })
      this.tool.showMessage(res,()=>{
				this.param.content.ownerid = res.data.sys_taskid
				this.dialogTableVisible = false
				this.refresh()
				this.errormsg = ''
        this.$emit('onSuccess')
       /* this.insertAssist(res.data.sys_taskid)*/
      })
		},
		refresh () {
			this.form = {
				"sys_taskid":0,
        "title":"任务标题",
        "remarks":"任务说明",
        "starttime":"",
        "remindday":0,
        "ownertable":"",
        "ownerid":0,
        "endtime":""
			}
		},
		showMenber () {
			this.leaderShow = true
      this.assistShow = false
      this.param.content.ownerid = this.data.sys_taskid
      this.$refs.member.listData()
			// this.validateInput()
		},
    showMenberAssist () {
      this.assistShow = true
      this.leaderShow = false
      this.paramAssist.content.ownerid = this.data.sys_taskid
      this.$refs.memberAssist.listData()
      // this.validateInput()
    },
    async assistList(id){
      this.assistPerson = ''
      this.assist = []
      const res = await this.$api.requested({
        "id": 20220930103501,
        "content": {
          "ownertable":"sys_task",
          "ownerid":id
        }
      })
      console.log(res,"团队")
      let arr = []
      res.data[0].team.forEach((e,index)=>{
        if (e.isleader === 0){
          if (index === 1){
            this.assistPerson = e.name
            this.assist
          }else {
            this.assistPerson = this.assistPerson + ',' + e.name
          }
        }
        this.assist[index] = e.userid
      })
      console.log(arr)
      console.log(this.assistPerson)
    },
    async insertAssist(id){
      const res = await this.$api.requested({
        "id": 20220930103601,
        "content": {
          "ownertable":"sys_task",
          "ownerid":id,
          "userids":this.assist,
          "justuserids":true
        }
      })
      this.$emit('onSuccess')
    }
	}
}

</script>
<style scoped>
.task__label{
	color:rgb(173, 172, 172);
}
</style>