标段模板、审批流程模板

备注：标段
有且只有一个标段：默认选中且必选，不可传空。（传空会查询出账号以外的标段数据）
有多个标段：默认第一个或者默认空，为空情况下查询多标段数据，不会查询账号以外的标段数据

<template lang='pug'>
  .supervision-monthlyReport.boxCommon
    .boxHeader
      xt-search(:searchList="searchList" ref="formName" @submit="searchHandle" :hasResetBtn="false")
      div(style="display: flex;")
        el-button(type="primary" style="display: inherit;margin-left:10px;" size="small" icon="iconfont icon-icon_xinzeng" @click="addFun") 新增
    .boxTable
      el-table(:data="tableData" border height="calc(100vh - 240px)"  v-loading="tableLoading")
        el-table-column(label="序号" type="index" align="center" width="80")
        el-table-column(prop="paragraph_name" label="标段" align="center" show-overflow-tooltip)
        el-table-column(prop="subsection_name" label="施工段(监理标)" align="center" show-overflow-tooltip)
        el-table-column(prop="number" label="期号" align="center")
        el-table-column(prop="create_time" label="创建时间" align="center")
        el-table-column(prop="realname" label="创建人" align="center")
        el-table-column(prop="status" label="状态" align="center")
        el-table-column(label="操作" align="center" width="220")
          template(slot-scope="scope")
            .operate
              span(@click="handleFun(0, scope.row)") 查看
              span(v-if="scope.row.delete" @click="handleFun(1, scope.row)") 删除
              span(v-if="scope.row.edit" @click="handleFun(2, scope.row)") 修改
              span(v-if="scope.row.handle" @click="handleFun(4, scope.row)") 处理
    xt-pagination(:total="total" @change="changePage" :page="pageForm.page" :page-size="pageForm.pageSize")
    xt-dialog(
      :title="title"
      ref="dialogRef"
      class="dialogRef"
      :showfooter="showfooter"
      top="5vh"
      width="55%"
      append-to-body
      :hasCancle="hasCancle"
      :hasDraft="hasDraft"
      :confirmText="confirmText"
      @confirm="handleConfirm"
      @draft="handleDraft"
      :autoclose="false"
      @close="handleDialogClose"
    )
      xt-form(
        ref="xtFormRef"
        :label-width="150"
        :formList="formList"
        :type="title"
        :grid="[2,2,1,1]"
        @submit="submit"
      )
      process(:title="title" ref="processRef" :formDetails="formDetails" :historyTableData="historyTableData" )    
</template>

<script>
import { mapGetters } from 'vuex'
import process from '@/views/components/process'
export default {
name: 'supervision-monthlyReport',
components: {
  process
},
data() {
  let vm = this
  return {
    btnType: '',
    historyTableData: [],
    title: '新增',
    hasDraft: true,
    hasCancle: false,
    showfooter: true,
    confirmText: '提交审批',
    cancleText: '保存草稿',
    dialogData: [],
    formDetails: {},
    total: 0,
    formList: [
      {
        title: '标段：',
        type: 'select',
        key: 'paragraph_id',
        rule: {required: true, message: '请选择标段', trigger: 'change'},
        props: {
          'placeholder': '请选择标段',
          clearable: false
        },
        options: [],
        onInput(value, item, form) {
          // vm.setOptions(value)
          vm.formList[1].options =  vm.getSubsectionArr(value)//根据标段获取施工段列表
          form['subsection_id'] = ''
          vm.getFormNumber()//改变期号
        }
      },
      {
        title: '施工段(监理标)：',
        type: 'select',
        key: 'subsection_id',
        rule: {required: true, message: '请选择施工段(监理标)', trigger: 'change'},
        props: {
          'placeholder': '请选择施工段(监理标)',
          clearable: false
        },
        options: [],
        onInput(value, item, form) {
          vm.getFormNumber()//改变期号
          // vm.formList[2].disabled = false
          // form['date'] = ''
        }
      },
      {
        title: '月报期号：',
        type: 'input',
        key: 'month_number',
        rule: {required: true, message: '请输入月报期号', trigger: 'blur'},
        props: {
          'placeholder': '请输入月报期号'
        },
        onInput(value, item, form) { 
          vm.getFormNumber()//改变期号
        },
        // on: {
        //   blur: function(){ //失去焦点改变期号
        //     
        // },
      },
      {
        title: '期号：',
        type: 'input',
        key: 'number',
        disabled: true,
        props: {
          'placeholder': '期月报'
        },
      },
      {
        title: '备注：',
        type: 'input',
        key: 'remark',
        props: {
          type: 'textarea',
          'placeholder': '请输入备注',
          autosize: {
            minRows: 2, 
            maxRows: 8
          }
        }
      },
      {
        title: '资料上传：',
        key: 'enclosure',
        defaultValue: [],
        rule: {required: true, message: '请上传资料', trigger: 'blur'},
        props: {
          'placeholder': '请上传附件'
        },
        renderContent (h, item, form) {
          return (<xt-newUnload url='data!oamanage/SupervisionMonth/upload' fileList={ form.enclosure } onChange={ res => form.enclosure = res } show-text="支持上传docx/doc/xlsx/xls/PDF/jpg/jpeg/png文件，且不超过100M" accept=".docx,.doc,.xlsx,.xls,.PDF,.jpg,.jpeg,.png" buttonType={vm.title == '详情' ? 'look' : vm.title == '处理' ?'look' : ''}></xt-newUnload>)

        }
      },
    ],
    tableData: [],
    tableLoading: false,
    searchForm: {},
    disabledYear: [],
    pageForm: {
      page: 1,
      pageSize: 20
    },
    searchList: [
      {
        type: 'xt-form',
        children: [
          {
            title: '标段：',
            type: 'select',
            key: 'paragraph_id',
            props: {
              placeholder: '请选择标段',
              clearable: true
            },
            options: [],
            onInput(value, item, form) {
              vm.searchForm.paragraph_id = value
              form['subsection_id'] = ''
            }
          },
          {
            title: '施工段(监理标)：',
            type: 'select',
            key: 'subsection_id',
            props: {
              placeholder: '请选择施工段(监理标)',
              clearable: true
            },
            options: [],
            onInput(value, item, form) {
              vm.searchForm.subsection_id = value
              // vm.getData()
            }
          },
          {
            title: '期号：',
            type: 'input',
            key: 'keywords',
            props: {
              'placeholder': '请输入期号'
            },
          },
          {
            title: '审批状态：',
            type: 'select',
            key: 'status',
            props: {
              'placeholder': '请选择审批状态',
            },
            options: [{value: 0, text: '待提交'},{value: 1, text: '审批中'},{value: 2, text: '已审批'},{value: 3, text: '已驳回'}],
          },
        ]
      }
    ]
  }
},
computed: {
  ...mapGetters(['currentProject', 'paragraphArr']),
},
watch: {
  title(v) {
    if(v == '处理') {
      this.hasCancle = true
      this.hasDraft = false
      this.confirmText = '提交'
    } else {
      this.hasCancle = false
      this.hasDraft = true
      this.confirmText = '提交审批'
    }
  }
},
methods: {
  changePage (row) {
    this.pageForm = { ...row }
    this.getData()
  },
  getFormNumber() {
    let data = this.$refs.xtFormRef.getForm()
      // if(data.subsection_id == '') return
    this.formList[1].options
    let subsection_name  = data.subsection_id == '' || data.subsection_id == null ? '' : this.formList[1].options.length > 0 ? this.formList[1].options.filter(item => data.subsection_id == item.value)[0].label : '' //拿分部中文
      // subsection_name = '监理二标'
    if(subsection_name == '监理二标' && data.month_number == 10) {
      this.$refs.xtFormRef.setForm({number: '监理'})
    }else {
      if(subsection_name == '' && data.month_number == ''){
        this.$refs.xtFormRef.setForm({number: '期月报'})
        return
      }
      this.$refs.xtFormRef.setForm({number: subsection_name + '第' + data.month_number + '期月报'}) //施工段简称1第15期月报
    }
    // let number = subsection_name + '第' + data.month_number + '期月报'
  },
  handleDialogClose() {
  },
  addFun() {
    this.title = '新增'
    this.showfooter = true
    this.$refs.dialogRef.open()
    this.$nextTick(() => {
      this.getSetting()
      this.$refs.xtFormRef.reset()
    })
  },
  // 保存草稿
  handleDraft() {
    this.btnType = '保存草稿'
    this.$refs.xtFormRef.submit()
  },
  async submit(form, valid) {
    if(valid) {
      let users = this.$refs.processRef.$refs.xtFormNext.getForm()
      let data = {
        ...form
      }
      // data.images = this.imageTableData
      // data.invests = this.investTableData
      if (users && users.process_users && users.process_users.length) {
        // data.process_users = users.process_users.join(',')
        data.process_users = users.process_users
      }
      if (this.title == '编辑') {
        data.id = this.formDetails.id
      }
      if (this.btnType == '提交审批') {
        // 提交审批逻辑
        data.action = 'start' //保存草稿传''，如果是提交审批的时候传固定值start
      }else {
        data.action = ''
      }
      let url = this.title == '新增' ? 'oamanageSupervisionMonth_add' :　'oamanageSupervisionMonth_edit'
      await this.$api[url](data)
      this.$success(`${this.btnType == '提交审批' ? '提交审批成功' : '保存草稿成功'}`)
      this.$refs.dialogRef.handleClose()
      this.getData()
    }
  },
  async handleConfirm() {
    if (this.title == '处理') {
      // 处理确定逻辑
      let handleData = this.$refs.processRef.$refs.xtFormHandle.getForm()
      let handleData1 = {}
      handleData1.status = handleData.handle_status
      handleData1.user = handleData.process_users
      handleData1.message = handleData.handle_opinion
      handleData1.step = handleData.return_link
      // if (handleData.process_users && handleData.process_users.length) {
      //   handleData.process_users = handleData.process_users.join(',')
      // }
      let data = {
        ...handleData,
        ...handleData1,
        id: this.formDetails.id
      }
      await this.$api.oamanageSupervisionMonth_run(data)
      this.$success('处理成功')
      this.$refs.dialogRef.handleClose()
      this.getData()
      return
    }
    // 提交审批逻辑
    this.btnType = '提交审批'
    this.$refs.xtFormRef.submit()
  },
  async handleFun(index, row) {
    this.formDetails = row //
    this.formDetails.is_end_link = row.last_step //处理中指定流程人员显隐
    if (index == 0) {// 查看
      this.title = '详情'
      this.showfooter = false
      let res = await this.$api.oamanageSupervisionMonth_processLog({id: row.id})
      // this.historyTableData = row.link_list || []
      this.historyTableData = res.result.map(item => {
        return {
          current_link: item.step,
          handle_opinion: item.opinion,
          operation_status: item.status,
          sending_time: item.time,
          user_name: item.user
        }
      }) || []
      this.$refs.dialogRef.open()
      this.$nextTick(() => {
        this.$refs.xtFormRef.reset()
        this.$refs.xtFormRef.setForm(row)
      })
    } else if (index == 1) {// 删除
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$api.oamanageSupervisionMonth_del({ids: row.id})
        this.$success('删除成功')
        this.getData()
      })
    } else if (index == 2) {// 修改
      this.title = '编辑'
      this.showfooter = true
      this.getSetting()
      this.$refs.dialogRef.open()
      // this.formList[2].disabled = false
      // this.formList[3].disabled = false
      this.$nextTick(() => {
        this.$refs.xtFormRef.reset()
        this.$refs.xtFormRef.setForm(row)
      })
    } else { // 处理
      this.title = '处理'
      this.showfooter = true
      let res = await this.$api.oamanageSupervisionMonth_processLog({id: row.id})
      // this.historyTableData = row.link_list || []
      this.historyTableData = res.result.map(item => {
        return {
          current_link: item.step,
          handle_opinion: item.opinion,
          operation_status: item.status,
          sending_time: item.time,
          user_name: item.user
        }
      }) || []
      this.$refs.dialogRef.open()
      this.$nextTick(() => {
        // this.$refs.processRef.formListHandle[3].isShow = !row.is_end_link
        this.$refs.processRef.formListHandle[3].isShow = !row.last_step
        this.$refs.processRef.formListHandle[4].isShow = false
        this.$refs.processRef.$refs.xtFormHandle.reset()
        this.getSetting(row.id)
      })
      this.$nextTick(() => {
        this.$refs.xtFormRef.reset()
        this.$refs.xtFormRef.setForm(row)
      })
    }
  },
  searchHandle (params) {
    if(params.paragraph_id == '' && this.searchList[0].children[0].options.length == 1){
      params.paragraph_id = this.searchList[0].children[0].options[0].value
    }//仅有一个标段时必选,不可清除
    this.searchForm = { ...params }
    this.getData()
  },
  async getData() {
    let data = {
      ...this.searchForm,
      ...this.pageForm
    }
    this.tableLoading = true
    let res = await this.$api.oamanageSupervisionMonth_list(data)
    this.tableLoading = false
    this.tableData  = res.result.data
    this.total = res.result.total
  },
  getSubsectionArr(id) {//根据标段获取施工段列表
    let arr = this.$getSubsectionAll(id)
    return arr
  },
  setOptions(id) {
    //搜索 ->标段
    this.searchList[0].children[0].options = this.paragraphArr
    //formList ->标段
    this.formList[0].options = this.paragraphArr
    // 默认选上标段\施工段
    if(this.paragraphArr && this.paragraphArr.length === 1) {//仅有一个标段
      this.$nextTick(() => {
        this.$refs.formName.$refs.form.setForm({
          paragraph_id: this.paragraphArr[0].value,
        })
      })
      //筛选-默认标段
      this.searchForm.paragraph_id = this.paragraphArr[0].value
      //新增-默认标段
      this.formList[0].defaultValue = this.paragraphArr[0].value

      let subsectionList = this.getSubsectionArr(this.paragraphArr[0].value)//根据标段获取施工段列表
      
      this.searchList[0].children[1].options = subsectionList//搜索 ->施工段
      this.formList[1].options = subsectionList//新增 ->施工段
      
      if(subsectionList && subsectionList.length === 1) {//且仅一个施工段，默认选上施工段
        this.$nextTick(() => {
          this.$refs.formName.$refs.form.setForm({
            subsection_id: subsectionList[0].value
          })
        })
        //筛选默认值-施工段
        this.searchForm.subsection_id = subsectionList[0].value
        //新增默认值-施工段
        this.formList[1].defaultValue = subsectionList[0].value
      }else {
        this.searchForm.subsection_id= ''
      }
    } //多个标段取全部、一个标段默认选择
    this.getData()
    return
    if (id) {
      this.searchList[0].children[1].options = this.$getSubsectionAll(id)
      this.formList[1].options = this.$getSubsectionAll(id)
      if (this.searchList[0].children[1].options && this.searchList[0].children[1].options.length) {
        this.searchForm.subsection_id = this.searchList[0].children[1].options[0].value
        this.$nextTick(() => {
          this.$refs.formName.$refs.form.setForm({
            subsection_id: this.searchList[0].children[1].options[0].value
          })
          this.formList[1].defaultValue = this.searchList[0].children[1].options[0].value
          this.formList[2].disabled = false
          let form = this.$refs.formName.$refs.form.getForm()
        })
      }
    } else {
      this.searchList[0].children[0].options = this.paragraphArr
      this.formList[0].options = this.paragraphArr
      if (this.paragraphArr && this.paragraphArr.length) {
        this.searchForm.paragraph_id = this.paragraphArr[0].value
        this.setOptions(this.paragraphArr[0].value)
        this.$nextTick(() => {
          this.$refs.formName.$refs.form.setForm({
            paragraph_id: this.paragraphArr[0].value
          })
          this.formList[0].defaultValue = this.paragraphArr[0].value
        })
      }
    }
  },
  async getSetting(id) {
    let data = {}
    if (id) {
      data.id = id //数据id，有的时候需要传，没有的时候不传
    }
    // this.$refs.processRef.formListNext[0].options = [{user_id: '2', username: '薄华',value: '2', text: '薄华'}]
    let res = await this.$api.oamanageSupervisionMonth_pserson(data)
    this.$refs.processRef.formListNext[0].options = res.result.process_revise.map(item => { //指定流程人员
      return {
        text: item.real_name,
        value: item.user_id
      }
    })  
    if (id) {
      this.$refs.processRef.formListHandle[0].options = res.result.handle_opinion.map((item) => {
        return {
          text: item,
          value: item
        }
      })
      this.$refs.processRef.$refs.xtFormHandle.setForm({
        advice: this.$refs.processRef.formListHandle[0].options[0].text,
        handle_opinion: this.$refs.processRef.formListHandle[0].options[0].text
      })
      this.$refs.processRef.formListHandle[3].options = res.result.process_revise.map((item) => {
        return {
          text: item.real_name,
          value: item.user_id
        }
      })
      this.$refs.processRef.formListHandle[2].options = res.result.handle_status.map((item) => {
        return {
          text: item.name,
          value: item.status
        }
      })
      this.$refs.processRef.formListHandle[4].options = res.result.return_link.map((item) => {
        return {
          text: item.title,
          value: item.return_link
        }
      })
    }
  }
},
created() {
  this.setOptions()
},
mounted() {
},
}
</script>
<style scoped lang="scss">
/deep/ .el-tabs__content {
  display: none;
}
/deep/ .el-upload__tip {
  line-height: 15px;
  display: inline-block;
}
.dialogRef {
  /deep/ .el-input {
    width: 100% !important;
  }
  /deep/ .el-textarea {
    width: 100% !important;
  }
  /deep/ .el-select {
    width: 100% !important;
  }
}
.dialogTable {
  /deep/ .el-input__inner {
    text-align: center !important;
  }
}
.operate{
  span {
    margin-right: 10px; cursor: pointer;
    color: #0077FF;
  }
}
</style>