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: 300px;"></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: 300px;">
              <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: 300px;" 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: 300px;" v-model="form.end_date" value-format="yyyy-MM-dd"
              type="date" placeholder="选择结束日期">
            </el-date-picker>
          </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: 300px;"></el-input>
          </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: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">
            <el-radio-group v-model="form.name7" @change='changeName7'>
                <el-radio :label="1">人员</el-radio>
                <el-radio :label="2">部门</el-radio>
            </el-radio-group>
          </div>
        </div>
      </template>
      <template v-slot:accept_department_ids v-if='form.name7==2'>
        <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: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:end_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" 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">
            <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>






    </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: '',
          content: '',
          file_ids: '',
          name7: 1,
          accept_department_ids: [],
          accept_admin_ids:[],
          end_type:'',
          end_content:'',
          type:'',
        },

        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 = []
        }
      },
      // 选择科室
      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;
        }).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,
          content: res?.content,
          file_ids: res?.file_ids,
          name7: res.accept_department_ids.length>0?2:(res.accept_admin_ids>0?1:1),
          accept_department_ids: res?.accept_department_ids,
          accept_admin_ids:res?.accept_admin_ids,
          end_type:res?.end_type,
          end_content:res?.end_content,
        }

        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 = []
        }
        console.log(this.form)
        // 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.$refs['dialog'].reset()
        }
      }
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .type{
    display: none;
  }

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

  .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>