youxiw2000 / trash · Files

<template>
  <div class="app-container">
    <el-select v-model="queryParams.dept" filterable  reserve-keyword @change="getList">
      <el-option v-for="item in depts" :label="item.name"
                  :value="item.code" :key="item.code" >
      </el-option>
    </el-select>
    <el-select v-model="queryParams.role" filterable  reserve-keyword @change="getList">
      <el-option v-for="item in roles" :label="item.name"
                  :value="item.code" :key="item.code" >
      </el-option>
    </el-select>


    <taskCard :task="task" v-for="task in taskList" @sendToParent="showTask" />

    <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 审批对话框 -->
    <el-dialog :title="title" :visible.sync="open" v-if="open" width="500px" append-to-body>

      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="submitForm(form.formData[0].controlId ,1)">驳回</el-button>
        <el-button type="primary" @click="submitForm(form.formData[0].controlId ,0)">通过</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="open2" width="400px" append-to-body>
      <threestepInfo :businessKey="businessKey" v-if="open2" />
      <el-form v-if="taskName == '巡查'" :rules="rules" label-width="100px">
        <el-row >
            <el-form-item label="补充说明">
              <el-input type="textarea" v-model="form.subReason" />
            </el-form-item>
        </el-row>
        <el-row >
            <el-form-item label="渣管负责人">
              <el-input v-model="form.earthPipPerson" />
            </el-form-item>
        </el-row>
        <el-row el-row>
            <el-form-item label="执法负责人">
              <el-input v-model="form.enforcePerson" />
            </el-form-item>
        </el-row>

        <el-row el-row>
          <el-col>
            上传补充材料:<a style="color:blue;font-size: 12px;" @click="picSample=true">示意图</a>
          </el-col>
        </el-row>
        <el-row el-row style="margin-top: 20px;">
          <el-col :span="12">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(0)">履职情况照片</a>
            <el-input v-model="form.sub_img0" type="hidden"></el-input>
            <p v-for="img in form.sub_img0">{{img.split(":")[0]}}<a @click="removeImage(0,img)" style="color:red"> x</a>
            </p>
          </el-col>
          <el-col :span="12">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(1)">水枪水嘴照片</a>
            <el-input v-model="form.sub_img1" type="hidden"></el-input>
            <p v-for="img in form.sub_img1">{{img.split(":")[0]}}<a @click="removeImage(1,img)" style="color:red"> x</a>
            </p>
          </el-col>
        </el-row>
          <el-row>
          <el-col :span="12">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(2)">照明照片</a>
            <el-input v-model="form.sub_img2" type="hidden"></el-input>
            <p v-for="img in form.sub_img2">{{img.split(":")[0]}}<a @click="removeImage(2,img)" style="color:red"> x</a>
            </p>
          </el-col>
          <el-col :span="12">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(3)">视频监控照片</a>
            <el-input v-model="form.sub_img3" type="hidden"></el-input>
            <p v-for="img in form.sub_img3">{{img.split(":")[0]}}<a @click="removeImage(3,img)" style="color:red"> x</a>
            </p>
          </el-col>
          </el-row>
          <el-row>
          <el-col :span="12">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(4)">洗车机照片</a>
            <el-input v-model="form.sub_img4" type="hidden"></el-input>
            <p v-for="img in form.sub_img4">{{img.split(":")[0]}}<a @click="removeImage(4,img)" style="color:red"> x</a>
            </p>
          </el-col>

          <el-col :span="12">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(5)">摄像头视频截图1</a>
            <el-input v-model="form.sub_img5" type="hidden"></el-input>
            <p v-for="img in form.sub_img5">{{img.split(":")[0]}}<a @click="removeImage(5,img)" style="color:red"> x</a>
            </p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(6)">摄像头视频截图2</a>
            <el-input v-model="form.sub_img6" type="hidden"></el-input>
            <p v-for="img in form.sub_img6">{{img.split(":")[0]}}<a @click="removeImage(6,img)" style="color:red"> x</a>
            </p>
          </el-col>
          <el-col :span="12">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(7)">摄像头视频截图3</a>
            <el-input v-model="form.sub_img7" type="hidden"></el-input>
            <p v-for="img in form.sub_img7">{{img.split(":")[0]}}<a @click="removeImage(7,img)" style="color:red"> x</a>
            </p>
          </el-col>
          </el-row>
          <el-row>
          <el-col :span="12">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(8)">其他1</a>
            <el-input v-model="form.sub_img8" type="hidden"></el-input>
            <p v-for="img in form.sub_img8">{{img.split(":")[0]}}<a @click="removeImage(8,img)" style="color:red"> x</a>
            </p>
          </el-col>

          <el-col :span="12">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(9)">其他2</a>
            <el-input v-model="form.sub_img9" type="hidden"></el-input>
            <p v-for="img in form.sub_img9">{{img.split(":")[0]}}<a @click="removeImage(9,img)" style="color:red"> x</a>
            </p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(10)">其他3</a>
            <el-input v-model="form.sub_img10" type="hidden"></el-input>
            <p v-for="img in form.sub_img10">{{img.split(":")[0]}}<a @click="removeImage(10,img)" style="color:red">
                x</a>
            </p>
          </el-col>
          <el-col :span="12">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(11)">其他4</a>
            <el-input v-model="form.sub_img11" type="hidden"></el-input>
            <p v-for="img in form.sub_img11">{{img.split(":")[0]}}<a @click="removeImage(11,img)" style="color:red">
                x</a>
            </p>
          </el-col>
        </el-row>
          <el-col :span="12">
            <a style="color:blue;font-size: 12px;" @click="showFileUpload(12)">其他5</a>
            <el-input v-model="form.sub_img12" type="hidden"></el-input>
            <p v-for="img in form.sub_img12">{{img.split(":")[0]}}<a @click="removeImage(12,img)" style="color:red">
                x</a>
            </p>
          </el-col>
      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="submitForm(form.formData[0].controlId ,1)">驳回</el-button>
        <el-button type="primary" @click="submitForm(form.formData[0].controlId ,0)">通过</el-button>
      </div>
    </el-dialog>



    <el-dialog title="附件" :visible.sync="uploadImageDialog" append-to-body :beforeClose="handleClose">
      <el-upload multiple :headers="upload.headers" :action="upload.url" :file-list="fileList"
        :on-success="uploadSuccess" :before-upload="beforeUpload">
        <el-button size="small" type="primary">选择附件</el-button>
        <div slot="tip" class="el-upload__tip">只能上传不超过 20MB 的jpg pdf word文件</div>
      </el-upload>
      <div style="height: 40px;width:100%;">
        <el-button type="primary" style="margin-top: 20px;float:right;" @click="handleClose">关闭</el-button>
      </div>
    </el-dialog>

    <el-dialog title="示意图" :visible.sync="picSample" append-to-body>
      <img src="../../../assets/logo/logo.jpg" width="100%" height="540px" />
    </el-dialog>
    <!--  会议管理  -->
    <el-dialog :title="title" :visible.sync="conferenceOpen" width="850px" append-to-body>
      <conferenceInfo :idInfo="idInfo" v-if="conferenceOpen"/>
      <div slot="footer" class="dialog-footer">
        <div slot="footer" class="dialog-footer">
          <el-button type="danger" @click="conferenceSubmitForm(1)">驳回</el-button>
          <el-button type="primary" @click="conferenceSubmitForm(0)">通过</el-button>
        </div>
      </div>
    </el-dialog>

    <!--  请假申请  -->
    <el-dialog :title="title" :visible.sync="leaveApplicationOpen" width="500px" append-to-body>
      <leaveApplicationInfo :idInfo="idInfo" v-if="leaveApplicationOpen"/>
      <div slot="footer" class="dialog-footer">
        <div slot="footer" class="dialog-footer">
          <el-button type="danger" @click="leaveApplicationSubmitForm(1)">驳回</el-button>
          <el-button type="primary" @click="leaveApplicationSubmitForm(0)">通过</el-button>
        </div>
      </div>
    </el-dialog>


    <el-dialog :title="title" :visible.sync="construct" width="540px" append-to-body>
      <constructsiteInfo :businessKey="businessKey" :signData="signData" v-if="construct" />
      <el-row>

      <el-input v-model="signDataInfo" type="textarea" :rows="4" style="margin-top: 10px;"></el-input>
      </el-row>
      <div slot="footer" class="dialog-footer">
          <el-button type="danger" @click="submitForm(form.formData[0].controlId ,1)">驳回</el-button>
          <el-button type="primary" @click="submitForm(form.formData[0].controlId ,0)">通过</el-button>
        </div>
    </el-dialog>


    <el-dialog :title="title" :visible.sync="earthsites" width="540px" append-to-body>
      <earthsitesInfo :businessKey="businessKey"  v-if="earthsites" />
      <div slot="footer" class="dialog-footer">
          <el-button type="danger" @click="submitForm(form.formData[0].controlId ,1)">驳回</el-button>
          <el-button type="primary" @click="submitForm(form.formData[0].controlId ,0)">通过</el-button>
        </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="contract" width="540px" append-to-body>
      <contractInfo :businessKey="businessKey"  v-if="contract" />
      <div slot="footer" class="dialog-footer">
          <el-button type="danger" @click="submitForm(form.formData[0].controlId ,1)">驳回</el-button>
          <el-button type="primary" @click="submitForm(form.formData[0].controlId ,0)">通过</el-button>
        </div>
    </el-dialog>

  </div>
</template>

<style>
  @import '../../../assets/css/task.css'
</style>

<script>
  import {
    listTask,
    formDataShow,
    formDataSave
  } from "@/api/activiti/task";


import {  getSignByObjId, addSign, updateSign } from "@/api/sign/sign";

  import {
    getArea,
    getDict,
  } from "@/api/dict";

  import {
    updateThreestep,
    activeThreestep
  } from "@/api/business/threestep";

  import leaveHistoryForm from "@/views/workflow/leaveHistoryForm";
  import threestepInfo from "@/views/h5/task/threestepInfo";
  import taskCard from "@/views/h5/task/taskCard";
  import {
    getToken
  } from "@/utils/auth";
  import conferenceInfo from "@/views/office/conference/conferenceInfo";
  import leaveApplicationInfo from "@/views/office/leaveApplication/leaveApplicationInfo";
  import constructsiteInfo from "@/views/activiti/task/constructsiteInfo";
  import earthsitesInfo from "@/views/activiti/task/earthsitesInfo";
  import contractInfo from "@/views/activiti/task/contractInfo";

  export default {
    name: "task",
    components: {
      taskCard,
      leaveHistoryForm,
      threestepInfo,
      conferenceInfo,
      leaveApplicationInfo,
      constructsiteInfo,
      earthsitesInfo,
      contractInfo,
    },
    data() {
      return {
        id: '',
        definitionKey: '',
        businessKey: '',
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 请假表格数据
        taskList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        open2: false,
        picSample: false,
        taskName: null,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          role:null,
          dept:null,
        },
        // 表单参数
        form: {
          formData: []
        },
        needShow: false,
        // 表单校验
        rules: {
          subReason: [{
            required: true,
            message: '请填写补充说明',
            trigger: 'change'
          }, ],

        },
        picIndex: 0,
        fileList: [],
        upload: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 设置上传的请求头部
          headers: {
            Authorization: "Bearer " + getToken()
          },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/business/threestep/upload",
        },
        uploadImageDialog: false,
        conferenceOpen: false,
        construct:false,
        idInfo:null,
        leaveApplicationOpen:false,
        signData:null,
        areas:[],
        roles:[],
        depts:[],
        signDataInfo:null,
        earthsites:false,
        contract:false,
      };
    },
    created() {
      let dep =  {type:"CSUserDepartmentType"};

      getDict(dep).then(res=>{
          this.depts = res.result;
      });

      let role =  {type:"CSUserPostType"};

      getDict(role).then(res=>{
          this.roles = res.result;
      });

      this.getList();
    },
    methods: {
      handleClose() {
        this.uploadImageDialog = false;
        this.fileList = [];
      },
      removeImage(index, img) {
        let target = "sub_img" + this.picIndex;
        this.form[target].splice(this.form[target].indexOf(img), 1);
      },
      uploadSuccess(res, file, fileList) {
        let target = "sub_img" + this.picIndex;
        if (!this.form[target]) {
          this.form[target] = [];
        }
        this.form[target].push(file.name + ':' + res);

      },
      showFileUpload(i) {
        this.uploadImageDialog = true;
        this.picIndex = i;
      },
      beforeUpload(file) {
        let isRightSize = file.size / 1024 / 1024 < 20
        if (!isRightSize) {
          this.$message.error('文件大小超过 20MB')
          return isRightSize;
        }
        let isAccept = false;
        if (file.name.indexOf('.docx') > -1 || file.name.indexOf(".jpg") > -1 || file.name.indexOf('.doc') > -1 || file
          .name.indexOf('.pdf') > -1) {
          isAccept = true;
        }
        if (!isAccept) {
          this.$message.error('应该选择PDF、JPG、WORD类型的文件')
          return isAccept;
        }
      },
      getList() {
        this.loading = true;
        listTask(this.queryParams).then(response => {
          this.taskList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },

      // 取消按钮
      cancel() {
        this.open = false;
        this.open2 = false;
        this.leaveApplicationOpen= false;
        this.conferenceOpen = false;
        this.construct = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.definitionKey = '',
          this.businessKey = '',
          this.form = {
            formData: [],
          };
        this.resetForm("form");
      },
      showTask(row, idx) {
        this.reset();
        this.definitionKey = row.definitionKey;
        this.businessKey = row.businessKey;
        this.id = row.id;
        this.taskName = row.name;
        formDataShow(row.id).then(response => {
          let datas = response.data;
          let formData = []
          for (let i = 0; i < datas.length; i++) {
            let strings = datas[i].split('--__!!')
            let controlValue = null
            let controlDefault = null
            switch (strings[1]) {
              case 'radio':
                controlValue = idx;
                controlDefault = strings[4]
                break;
                // default:
            }
            formData.push({
              controlId: strings[0],
              controlType: strings[1],
              controlLable: strings[2],
              controlIsParam: strings[3],
              controlValue: controlValue,
              controlDefault: controlDefault
            })
          }
          this.form.formData = formData;

          if (this.definitionKey == "workflow_threestep") {
            this.open2 = true;
            return;
          }
          if(this.definitionKey == "conference"){
            this.idInfo = row.businessKey.substring(row.businessKey.indexOf(":")+1);
            this.conferenceOpen = true;
            return;
          }
          if(this.definitionKey == "workflow_leave"){
            this.idInfo = row.businessKey.substring(row.businessKey.lastIndexOf(":")+1);
            this.leaveApplicationOpen = true;
            return;
          }

          if(this.definitionKey == "workflow_constructsite"){
            getSignByObjId(this.businessKey.split(":")[1]).then(res=>{

                this.signDataInfo = "经现场查勘及核对资料，现场设施基本达到净车出场标准，建议按程序办理相关手续，妥否，请批示。";

                this.signData = res.data;
                this.construct = true;
            });
            return;
          }
          if(this.definitionKey == "workflow_earthsites"){
            this.earthsites = true;
            return;
          }
          if(this.definitionKey == "workflow_conract"){
            this.contract = true;
            return;
          }


          this.open = true;
          this.title = "审批";
        });
      },
      /** 提交按钮 */
      submitForm(formid, value) {

        this.form.formData[0].controlValue = value;
        this.form.formData[0].controlId = formid;
        this.form.id = this.businessKey.split(":")[1];
        if (this.form.formData[0].controlValue == 0) {
          this.form.status = 1;
        } else {
          this.form.status = 2;
        }

        if (this.definitionKey == "workflow_threestep") {


          for (let i = 0; i < 13; i++) {
            if (this.form["sub_img" + i]) {
              let paths = "";
              for (var j = 0; j < this.form["sub_img" + i].length; j++) {
                paths += this.form["sub_img" + i][j].split(":")[1] + ",";
              }
              this.form["sub_img" + i] = paths.substring(0, paths.length - 1);
            }
          }

          this.form.checkTime = new Date();
          if (this.form.status == 1) {
            activeThreestep(this.form).then(res => {
              formDataSave(this.id, this.form.formData).then(response => {
                this.msgSuccess("审批成功");
                this.open2 = false;
                this.taskList = [];
                this.getList();
              });
            });
          } else {
            updateThreestep(this.form).then(res => {
              formDataSave(this.id, this.form.formData).then(response => {
                this.msgSuccess("审批成功");
                this.open2 = false;
                this.taskList = [];
                this.getList();
              });
            });
          }
          return;
        }

        if(this.definitionKey == "workflow_constructsite"){
            if(this.form.status == 1){
                let objId = this.businessKey.split(":")[1];
                let query = {
                  objectId : objId,
                };
                if(this.taskName == "勘察科员"){
                  query.idx = 0;
                  query.sign1Text = this.signDataInfo;
                }else if(this.taskName == "堪察部长"){
                  query.idx = 1;
                  query.sign2Text = this.signDataInfo;
                }else if(this.taskName == "堪察分管领导"){
                  query.idx = 2;
                  query.sign3Text = this.signDataInfo;
                }else if(this.taskName == "中心负责人"){
                  query.idx = 3;
                  query.sign4Text = this.signDataInfo;
                }

                addSign(query).then(res=>{
                  formDataSave(this.id, this.form.formData).then(response => {
                    this.msgSuccess("审批成功");
                    this.open = false;
                    this.construct = false;
                    this.getList();
                  });
                })

            }else{

              formDataSave(this.id, this.form.formData).then(response => {
                this.msgSuccess("审批成功");
                this.construct = false;
                this.getList();
              });
            }
            return;
        }
      if(this.definitionKey == "workflow_conract"){
          formDataSave(this.id, this.form.formData).then(response => {
            this.msgSuccess("审批成功");
            this.contract = false;
            this.getList();
          });
        }
      if(this.definitionKey == "workflow_earthsites"){
          formDataSave(this.id, this.form.formData).then(response => {
            this.msgSuccess("审批成功");
            this.earthsites = false;
            this.getList();
          });
        }
      },
      conferenceSubmitForm(value){
        return;
        this.form.formData[0].controlValue = value;
        if(value==0){
          this.form.status = 1;
        }else{
          this.form.status = 2;
        }
        //审批or驳回
        formDataSave(this.id, this.form.formData).then(response => {
            this.msgSuccess("审批成功");
            this.conferenceOpen = false;
            this.taskList = [];
            this.getList();
        });
      },
      leaveApplicationSubmitForm(value){
        if(value==0){
          this.form.status = 1;
        }else{
          this.form.status = 2;
        }
        this.form.formData[0].controlValue = value;
        //审批or驳回
        formDataSave(this.id, this.form.formData).then(response => {
          this.msgSuccess("审批成功");
          this.leaveApplicationOpen = false;
          this.taskList = [];
          this.getList();
        });
      }
    }
  };
</script>


<style scoped>
  div{
    font-size:12px;
  }

</style>