szhd-safety-web-new/src/views/task/list/components/addUnit.vue

<template>
  <div>
    <xy-dialog ref="dialog" :is-show.sync="isShow" type="form" :title="type === 'add' ? '发起任务' : '编辑任务'" :form="form"
      :rules='rules' @submit="submit">
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>任务名称：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.name" placeholder="请输入任务名称" clearable style="width: 400px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:unit_type>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>任务类型：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.unit_type" filterable clearable placeholder="请选择任务类型" style="width: 400px;">
              <el-option v-for="item in unitTypeList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:start_date>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>开始日期：
          </div>
          <div class="xy-table-item-content">
            <el-date-picker style="width: 400px;" v-model="form.start_date" value-format="yyyy-MM-dd" type="date"
              placeholder="选择开始日期">
            </el-date-picker>
          </div>
        </div>
      </template>
      <template v-slot:end_date>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>结束日期：
          </div>
          <div class="xy-table-item-content">
            <el-date-picker style="width: 400px;" v-model="form.end_date" value-format="yyyy-MM-dd" type="date"
              placeholder="选择结束日期">
            </el-date-picker>
          </div>
        </div>
      </template>
      <template v-slot:is_audit>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>是否审批：
          </div>
          <div class="xy-table-item-content">
            <el-radio-group v-model="form.is_audit" @change='changeAudit'>
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </div>
        </div>
      </template>
      <template v-slot:audit_admin_id v-if="form.is_audit==1">
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>审批人：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.audit_admin_id" filterable clearable placeholder="请选择审批人" style="width: 400px;">
              <el-option v-for="item in userdata" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:file_ids>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>附件：
          </div>
          <div class="xy-table-item-content">
            <el-upload :action="action" class='upload-demo' :file-list="pictureList" ref="pictureUpload"
              style="width:600px" :auto-upload="true" :data="uploadOther" :on-success="handlesuccess"
              :on-remove="handleRemove">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </div>
        </div>
      </template>
      <template v-slot:content>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>说明：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.content" :rows='5' type='textarea' placeholder="请输入说明" clearable
              style="width:400px"></el-input>
          </div>
        </div>
      </template>

      <template v-slot:end_type>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="width:140px">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>任务完成要求：
          </div>
          <div class="xy-table-item-content" style='min-width:600px'>
            <el-select style="width: 400px;" v-model="form.end_type" filterable clearable placeholder="请选择任务完成要求">
              <el-option v-for="item in endTypeList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:end_content>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="width:140px">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>任务完成详情：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.end_content" :rows='5' type='textarea' placeholder="请输入任务完成详情" clearable
              style="width: 400px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:name7>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>用户类型选择：
          </div>
          <div class="xy-table-item-content" style="width:400px">
            <el-radio-group v-model="form.name7" @change='changeName7'>
              <el-radio :label="1">人员</el-radio>
              <el-radio :label="2" v-if='form.type!=4'>部门</el-radio>
              <el-radio :label="3" v-if='form.type!=4'>组别</el-radio>
            </el-radio-group>
          </div>
        </div>
      </template>
      <template v-slot:accept_admin_ids v-if='form.name7==1'>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>
          </div>
          <div class="xy-table-item-content" style='min-width:600px'>
            <el-transfer filterable :titles="['待选择', '已选择']" :props="{key: 'id',label: 'name'}"
              :filter-method="filterMethod" :format="{ noChecked: '${total}',hasChecked: '${checked}/${total}' }"
              filter-placeholder="请选择参与人员" v-model="form.accept_admin_ids" :data="userdata">
            </el-transfer>
          </div>
        </div>
      </template>
      <template v-slot:accept_department_ids v-if='form.name7==2&&form.type!=4'>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>
          </div>
          <div class="xy-table-item-content" style='min-width:600px'>
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
            </el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="form.accept_department_ids" @change="handleCheckedDeptChange">
              <el-checkbox @change="handleCheckedDeptSingleChange" v-for="dept in deptOptions" :label="dept.id"
                :key="dept.id">{{dept.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </template>

      <template v-slot:mission_groups v-if='form.name7==3&&form.type!=4'>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>
          </div>
          <div class="xy-table-item-content" style='min-width:600px'>
            <Button type='primary' @click="mission_groups_list.push({name:'',type:1,link_id:[]})">新增组别</Button>
            <div v-for="(item,index) in mission_groups_list" style='margin:10px;margin-left:0'>
              <div>
                <Button style="margin-right:10px" @click="mission_groups_list.splice(index,1)">删除</Button>
                组别：{{item.name=mission_groups_name[index]}}
                <el-radio-group v-model="item.type" @change='item.link_id=[]' style="margin:10px;margin-right:20px">
                  <el-radio :label="1">人员</el-radio>
                  <el-radio :label="2">部门</el-radio>
                </el-radio-group>
                <el-select v-if='item.type==1' v-model="item.link_id" clearable filterable multiple placeholder="请选择人员">
                  <el-option v-for="item in userdata" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
                <el-select v-if='item.type==2' v-model="item.link_id" clearable filterable multiple placeholder="请选择部门">
                  <el-option v-for="item in deptOptions" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>

              </div>

            </div>


          </div>
        </div>
      </template>





    </xy-dialog>

  </div>
</template>

<script>
  import {
    Message
  } from 'element-ui'
  import {
    getparameteritem
  } from "@/api/system/dictionary.js";
  import {
    save,
    get
  } from "@/api/task/unit.js";
  import {
    listdept
  } from "@/api/system/department.js"
  import {
    listCommonuser
  } from "@/api/common.js"
  import {
    getToken
  } from '@/utils/auth'
  export default {
    components: {

    },
    data() {
      return {
        isShow: false,
        type: 'add',
        id: '',
        uploadOther: {
          token: ""
        },
        action: `${process.env.VUE_APP_BASE_API}api/admin/upload-file`,
        pictureList: [],
        deptOptions: [],
        checkAll: false,
        isIndeterminate: true,
        userdata: [],
        filterMethod(query, item) {
          return item.name.indexOf(query) > -1;
        },
        unitTypeList: [{
          id: 1,
          value: '专项检查'
        }, {
          id: 2,
          value: '资料收集'
        }, {
          id: 3,
          value: '网络安全'
        }],
        endTypeList: [{
          id: 1,
          name: '提交文字'
        }, {
          id: 2,
          name: '提交附件'
        }, {
          id: 3,
          name: '提交文字与附件'
        }],
        form: {
          type: '',
          name: '',
          unit_type: '',
          start_date: '',
          end_date: '',
          is_audit: 0,
          audit_admin_id: '',
          audit_status: 1,
          file_ids: '',
          content: '',

          end_type: '',
          end_content: '',
          type: '',
          name7: 1,
          accept_admin_ids: [],
          accept_department_ids: [],
          mission_groups: []
        },
        mission_groups_list: [{
          name: '',
          type: 1,
          link_id: []
        }],
        mission_groups_name: ['一组', '二组', '三组', '四组', '五组', '六组', '七组', '八组', '九组', '十组'],
        rules: {
          name: [{
            required: true,
            message: '请输入任务名称'
          }],
          start_date: [{
            required: true,
            message: '请选择开始时间'
          }],
          end_date: [{
            required: true,
            message: '请选择结束时间'
          }],
          unit_type: [{
            required: true,
            message: '请选择任务类型'
          }]
        }
      }
    },
    created() {
      this.uploadOther.token = getToken();
      if (this.$route.path) {
        let path = this.$route.path.split("_")
        this.form.type = path[1]
      }
      this.loadDeptOptions()
      this.loadUser()
    },
    methods: {
      changeName7(e) {
        if (e) {
          this.form.accept_department_ids = []
          this.form.accept_admin_ids = []
          this.form.mission_groups = []
          this.form.mission_groups_list = []
        }
      },
      changeAudit(e) {
        console.log("e",e)
        if (e == 1) {
          this.form.audit_status = 0
          this.form.audit_admin_id = ''
        } else {
          this.form.audit_status = 1
          this.form.audit_admin_id = 0
        }
      },
      // 选择科室
      loadDeptOptions() {
        listdept().
        then((res) => {
          for (var m of res) {
            m.checked = false;
          }
          this.deptOptions = res;
        }).catch(error => {
          console.log(error)
          reject(error)
        })
      },
      loadUser() {
        listCommonuser({
          page_size: 999
        }).
        then((res) => {
          this.userdata = res.data ? res.data.reverse() : [];
        }).catch(error => {
          console.log(error)
        })
      },
      handleCheckAllChange(val) {
        let options = [];
        for (var m of this.deptOptions) {
          options.push(m.id);
        }
        this.form.accept_department_ids = val ? options : [];
        this.isIndeterminate = false;
      },
      handleCheckedDeptSingleChange(v) {
        //如果出现取消的操作 就要执行删除
        console.log(v);
        var that = this;
        if (this.form.accept_department_ids)
          that.delDeptItem();

      },
      //删除操作
      delDeptItem() {
        for (var m of this.deptOptions) {
          if (this.form.accept_department_ids.indexOf(m.id) == -1) {
            var d = this.form.accept_department_ids.filter(function(t) {
              return t.department_id == m.id;
            })

            if (d.length != 0) {
              delDep(d[0].id).then(response => {}).catch(error => {
                console.log(error)
              })
            }

          }
        }
      },
      handleCheckedDeptChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.deptOptions.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.deptOptions.length;
      },

      async getDetail() {
        const res = await get(this.id)
        this.form = {
          type: res?.type,
          name: res?.name,
          unit_type: res?.unit_type,
          start_date: res?.start_date,
          end_date: res?.end_date,
          is_audit: res.audit_admin_id ? 1 : 0,
          audit_admin_id: res.audit_admin_id ? res.audit_admin_id : '',
          audit_status: res.audit_status?res.audit_status:1,
          file_ids: res?.file_ids,
          content: res?.content,
          end_type: res?.end_type,
          end_content: res?.end_content,
          name7: res.accept_department_ids.length > 0 ? 2 : (res.accept_admin_ids.length > 0 ? 1 : (res
            .groups.length > 0 ? 3 : 1)),
          accept_admin_ids: res?.accept_admin_ids,
          accept_department_ids: res?.accept_department_ids,
          mission_groups: res?.groups
        }
        this.mission_groups_list = []
        for (var g of res.groups) {
          this.mission_groups_list.push({
            name: g.name,
            type: g.type,
            link_id: g.link_id
          })
        }
        // this.mission_groups_list = res?.mission_groups
        for (var f of res.files) {
          this.pictureList.push({
            id: f.id,
            url: f.url,
            name: f.original_name
          })
        }
        // res.guide_upload ? this.guidePictureList.push(res.guide_upload) : ''
      },
      submit() {
        let _files = []
        if (this.pictureList.length > 0) {
          for (var h of this.pictureList) {
            if (h.response) {
              _files.push(h.response.id)
            } else {
              _files.push(h.id)
            }
          }
          this.form.file_ids = _files
        } else {
          this.form.file_ids = []
        }
        if(this.form.is_audit==0){
          this.form.audit_admin_id = 0
          this.audit_status = 1
        }else{
           this.audit_status = 0
           if(!this.form.audit_admin_id){
             Message({
               type: 'warning',
               message: `请选择审批人`
             })
             return
           }
        }
        // console.log("this.form",this.form)
        // return
        if (this.form.name7 == 3) {
          if (this.mission_groups_list.length == 0) {
            Message({
              type: 'warning',
              message: `请新增组别`
            })
            return
          }
          for (let k of this.mission_groups_list) {
            if (k.link_id.length == 0) {
              Message({
                type: 'warning',
                message: `请选择小组成员`
              })
              return
            }
          }

        }
        this.form.mission_groups = this.mission_groups_list
        // return
        if (this.type === 'add') {
          save({
            ...this.form
          }).then(res => {
            Message({
              type: 'success',
              message: '新增任务成功'
            })
            this.isShow = false
            this.$emit('refresh')
          })
          return
        }
        if (this.type === 'editor') {
          save({
            id: this.id,
            ...this.form
          }).then(res => {
            Message({
              type: 'success',
              message: '编辑任务成功'
            })
            this.isShow = false
            this.$emit('refresh')
          })
        }
      },
      handleRemove(file, fileList) {
        this.pictureList = fileList
      },
      handlesuccess(response, file, fileList) {
        this.pictureList = fileList
      },
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'editor') {
            this.getDetail()
          }
        } else {
          this.id = ''
          this.pictureList = []
          this.mission_groups_list = [{
            name: '',
            type: 1,
            link_id: []
          }]
          this.$refs['dialog'].reset()
        }
      }
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .name7,::v-deep .content,
  ::v-deep .end_type,
  ::v-deep .file_ids{
    flex-basis: 100%;
  }

  ::v-deep .type {
    display: none;
  }

  .xy-table-item-label {
    width: 140px;
  }

  .img__delete {
    transform: scale(0.8, 0.8);

    position: absolute;
    top: 4px;
    right: 4px;
  }

  ::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  ::v-deep .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  ::v-deep .el-upload--picture-card {
    font-size: 28px;
    color: #8c939d;
    width: 80px !important;
    height: 80px !important;
    line-height: 80px !important;
    text-align: center;
  }

  ::v-deep .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px !important;
    height: 80px !important;
    line-height: 80px !important;
    text-align: center;
  }

  ::v-deep .avatar {
    width: 80px !important;
    display: block;
    border-radius: 6px;
  }

  // ::v-deep .xy-table-item-label {
  //   width: 160px !important;
  // }

  ::v-deep .el-date-editor .el-range-separator {
    width: auto !important;
  }

  ::v-deep .el-input-number .el-input__inner {
    text-align: left !important;
  }

  .searchCompanys {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;

    .el-input {
      width: 80%
    }
  }
</style>