contract-business-web/src/views/contract/seeContract.vue

<template>
  <div style="padding: 0 20px;" ref="contractList">
    <lx-header icon="md-apps" text="合同列表" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
      <div slot="content"></div>
      <slot>
        <div class="selects">
          <div>
            <span style="padding: 0 6px;word-break: keep-all;">关键字</span>
            <span>
              <Input v-model="select.keyword" clearable placeholder="关键字搜索"  style="width: 200px"/>
            </span>
          </div>

          <div>
            <span style="padding: 0 6px;word-break: keep-all;">创建日期</span>
            <span>
              <DatePicker v-model="select.showDatePicker" clearable placeholder="请选择日期" type="daterange" placement="bottom-start" style="width: 200px" @on-change="datePick"></DatePicker>
            </span>
          </div>

          <div>
            <span style="padding: 0 6px;word-break: keep-all;">
            项目类型
            </span>
            <Select placeholder="请选择项目类型" v-model="select.type" style="width:140px;" clearable>
              <Option v-for="item in type" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </div>

          <div>
            <span style="padding: 0 6px;word-break: keep-all;">
            业务科室
          </span>
            <el-cascader
              placeholder="选择业务科室"
              size="small"
              :value="select.department"
              style="width: 160px;"
              :options="departments"
              :props="{ checkStrictly: true, label: 'name', value: 'id' }"
              clearable
              @change="e => select.department = e[e.length-1] || ''"/>
          </div>

          <div>
            <span style="padding: 0 6px;word-break: keep-all;">
            采购形式
          </span>
            <Select clearable placeholder="请选择采购形式" v-model="select.purchaseModality" style="width:200px;">
              <Option v-for="item in purchaseType" :value="item.id" :key="item.id">{{ item.value }}</Option>
            </Select>
          </div>

          <div>
            <span style="padding: 0 6px;word-break: keep-all;">
            采购方式
          </span>
            <Select clearable placeholder="请选择采购方式" v-model="select.purchaseMethods" style="width:200px;">
              <Option v-for="item in purchaseWay" :value="item.id" :key="item.id">{{ item.value }}</Option>
            </Select>
          </div>

          <div>
            <span style="padding: 0 6px;word-break: keep-all;">
            预算金额
            </span>
            <InputNumber
              style="width: 100px;"
              placeholder="最小金额"
              :min="0"
              v-model="select.priceMin"/>
            <span style="padding: 0 5px;">-</span>
            <InputNumber
              style="width: 100px;"
              placeholder="最大金额"
              :min="0"
              v-model="select.priceMax"/>
          </div>

          <div>
            <span style="padding: 0 6px;word-break: keep-all;">
            状态
          </span>
            <Select clearable placeholder="请选择合同状态" v-model="select.status" style="width:200px;">
              <Option v-for="item in [{label:'待签订',value:1},{label:'已签订',value:2}]" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </div>

          <Button type="primary"  style="margin-left: 10px" @click="getContracts">查询</Button>
          <Button type="primary"  style="margin-left: 10px" ghost
                  @click=" select = {showDatePicker:'',ageIndex:1,startDate:'',endDate:'',type:'',department:'',purchaseModality:'',purchaseMethods:'',priceMin:null,priceMax:null,status:''}">重置</Button>
          <!--          <Button type="primary"  style="margin-left: 10px">导出</Button>-->
        </div>
      </slot>
    </lx-header>

    <xy-table ref="xyTable" :table-item="table" :list="list" @editor="" @delete="(row)=>deleteContract(row.id)" @cellClick="showPaymentPlan" :cell-style="cellStyle" :show-summary="true" :summary-method="summary">
      <template v-slot:btns>
        <el-table-column label="操作" fixed="right" width="100" header-align="center" align="center">
          <template slot-scope="scope">
            <div class="slot-btns">
              <Button class="slot-btns-item" type="primary" size="small" @click="$refs['detailContract'].getDetail(scope.row.id),$refs['detailContract'].isShowDetail = true">查看</Button>
            </div>
          </template>
        </el-table-column>
      </template>
    </xy-table>

    <div style="display: flex;justify-content: flex-end;">
      <Page :total="total" show-elevator @on-change="pageChange"/>
    </div>

    <!--    查看-->
    <detail ref="detailContract"></detail>

    <!--    查看付款计划-->
    <contractPaymentRegistration ref="contractPaymentRegistration"></contractPaymentRegistration>
  </div>
</template>

<script>
import {getContract,addContrant,delContract} from "@/api/contract/contract"
import {getparameter} from "@/api/system/dictionary"
import {listdeptNoAuth} from "@/api/system/department";
import {getBudget} from "@/api/budget/budget"
import {getOatoken} from "@/api/oatoken"
import {parseTime} from "@/utils"
import {Message} from "element-ui";

import editor from "./components/editorContract"
import detail from "./components/detailContract"
import paymentRegistration from "./components/paymentRegistration";
import contractSign from "@/views/contract/components/contractSign";
import contractPaymentRegistration from "@/views/contract/components/contractPaymentRegistration";
import {login} from "@/api/user";
export default {
  components:{
    editor,
    detail,
    paymentRegistration,
    contractSign,
    contractPaymentRegistration
  },
  data() {
    var planPass = (rule, value, callback) => {
      if(this.form.isBudget){
        if(this.form.plan.length === 0){
          return callback(new Error('必选'))
        }else{
          callback()
        }
      }else{
        callback()
      }
    }
    return {
      window:{
        width:0,
        height:0,
        top:0,
        left:0
      },

      //搜索
      select:{
        keyword:'',
        showDatePicker:'',
        pageIndex:1,
        startDate:"",
        endDate:"",
        type:"",
        department:"",
        purchaseModality:"",
        purchaseMethods:"",
        priceMin:null,
        priceMax:null,
        status:""
      },
      type:[{label:'服务',value:1},{label:'货物',value:2},{label:'工程',value:3}],
      purchaseType: [],//购买形式
      purchaseWay:[],//购买方式
      moneyWay:[],//资金渠道
      departments:[],//部门科室
      list:[],//数据
      total:0,
      //表格
      table:[
        {
          label:"项目名称",
          width: 150,
          prop:'name',
          fixed:'left',
          align:'left'
        },
        {
          label:"采购形式",
          width: 120,
          prop:'purchase_type.value'
        },
        {
          label:"项目类型",
          width: 120,
          prop:'type',
          formatter:(cell,data,value)=>{
            switch (value){
              case 1:
                return "服务"
                break;
              case 2:
                return "货物"
                break;
              case 3:
                return "工程"
                break;
              default:
                return "未知"
            }
          }
        },
        {
          label:"采购流程",
          multiHd:[
            {
              label:"请示流程",
              width: 140,
              prop:'req_status',
              formatter:(cell,data,value)=>{
                if(cell.is_plan === 1){
                  return '无'
                }
                switch (value){
                  case 1:
                    return "待申请"
                    break;
                  case 2:
                    return "流转中"
                    break;
                  case 3:
                    return "已办结"
                    break;
                  default:
                    return "异常"
                    break;
                }
              }
            },
            {
              label:"采购业务审批流程",
              width: 158,
              prop:'purchase_status',
              formatter:(cell,data,value)=>{
                switch (value){
                  case 1:
                    return "待申请"
                    break;
                  case 2:
                    return "流转中"
                    break;
                  case 3:
                    return "已办结"
                    break;
                  default:
                    return "异常"
                    break;
                }
              }
            },
            {
              label:"招标审核流程",
              width: 145,
              prop:'invite_status',
              formatter:(cell,data,value)=>{
                switch (value){
                  case 1:
                    return "待申请"
                    break;
                  case 2:
                    return "流转中"
                    break;
                  case 3:
                    return "已办结"
                    break;
                  default:
                    return "异常"
                    break;
                }
              }
            },
            {
              label:"合同会签流程",
              width: 145,
              prop:'join_status',
              formatter:(cell,data,value)=>{
                switch (value){
                  case 1:
                    return "待申请"
                    break;
                  case 2:
                    return "流转中"
                    break;
                  case 3:
                    return "已办结"
                    break;
                  default:
                    return "异常"
                    break;
                }
              }
            }
          ]
        },
        {
          label:"采购方式",
          width: 120,
          prop:"purchase_way.value"
        },
        {
          label:"资金来源",
          width: 120,
          customFn:(row)=>{
            {
              return row.money_way_detail.map(item => {
                return (<div>{item.value}</div>)
              })
            }

          }
        },
        {
          label:'已付金额',
          prop:'fund_log_total',
          width:120,
          align:'right',
          formatter:(cell,data,value)=>{
            if(!value){
              return '0.00'
            }
            return value
          }
        },
        {
          label:"合同预算价(万元)",
          width: 160,
          prop:"plan_price",
          align:'right',
          formatter:(v1,v2,value)=>{
            return value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
          }
        },
        {
          label:'合同签订价（万元）',
          width: 180,
          prop:'money',
          align:'right'
        },
        {
          label:"合同状态",
          width: 120,
          prop:"status",
          formatter:(cell,data,value)=>{
            switch (value){
              case 1:
                return "待签订"
                break;
              case 2:
                return "已签订"
                break;
              default:
                return "未知"
            }
          }
        },
        {
          label:'付款计划',
          prop:'sign_plan_count',
          width: 120,
          formatter:(cell,data,value)=>{
            if(value == 0) return '暂无'
            return value + '期'
          }
        },
        {
          label:"业务科室",
          width: 140,
          prop:'department.name'
        },
        {
          label:"经办人",
          width: 140,
          prop:'admin.name'
        },
        {
          label:"创建日期",
          width: 160,
          prop:'created_at',
          formatter:(cell,data,value)=>{
            return parseTime(new Date(value),"{y}-{m}-{d}")
          }
        }
      ],
      //总计
      tableTotal:{
        fundLogTotal:0,
        moneyTotal:0,
        planPriceTotal:0
      },

      planTable:[
        {
          width: 36,
          sortable: false,
          type:'selection'
        },
        {
          label:"分类",
          prop:'type',
          formatter:(cell,data,value)=>{
            switch (value){
              case 1:
                return "部门预算"
                break;
              case 2:
                return "水务计划"
                break;
              default:
                return "未知"
            }
          }
        },
        {
          label:"名称",
          prop:'name',
          align:'left'
        },
        {
          label:"计划金额",
          prop:'money',
          align:'right'
        }
      ],


      //新增
      isShowAdd:false,
      form:{
        name:"",
        type:"",
        methods:"",
        modality:"",
        price:"",
        fundingChannels:[],
        isBudget:true,
        plan:[]
      },
      rules:{
        name:[
          {required:true,message:"必填"}
        ],
        type:[
          {required:true,message:"必选"}
        ],
        methods:[
          {required:true,message:"必选"}
        ],
        modality:[
          {required:true,message:"必选"}
        ],
        price:[
          {required:true,message:"必填"},
          {pattern:/^\d+(\.\d+)?$/, message: '必须为数字'}
        ],
        fundingChannels:[
          {required:true,message:"必填"}
        ],
        plan:[
          {validator:planPass, trigger: 'change'}
        ]
      },
      isShowPlan:false,//新增中预算计划
      plans:[],//预算数据
      planSearch:'',
      planTotal:0,
      plansPageIndex:1,

      isShowEditor:false,
    }
  },
  methods: {
    //预算计划金额输入
    planInput(e,row){
      if(e <= (Number(row.money) - Number(row.use_money_total))){
        row.useMoney = e
      }else{
        Message({
          type:'warning',
          message:'使用金额大于剩余预算'
        })
        row.useMoney = 0
      }
    },
    //合计
    summary(param){
      this.$nextTick(()=>{
        this.$refs['xyTable'].$children[0].doLayout()
      })
      const { columns, data } = param
      const sums = []
      columns.map((column,index) => {
        if(index === 0){
          sums[index] = '总计'
          return
        }
        if(column.property === 'fund_log_total'){
          sums[index] = this.tableTotal.fundLogTotal
          return
        }
        if(column.property === 'plan_price'){
          sums[index] = this.tableTotal.planPriceTotal
          return
        }
        if(column.property === 'money'){
          sums[index] = this.tableTotal.moneyTotal
          return
        }

        // const values = data.map(item => Number(item[column.property]));
        // if (!values.every(value => isNaN(value)) && (column.property === 'money' || column.property === 'plan_price'|| column.property === 'fund_log_total')) {
        //
        //   sums[index] = sums[index].toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
        // } else {
        //   sums[index] = '';
        // }
      })

      return sums
    },

    cellStyle({row, column, rowIndex, columnIndex}){
      if(column.property === 'req_status'){
        if(row.is_plan === 1){
          return {'color':'rgb(140,140,140)'}
        }
        switch (row.req_status){
          case 1:
            return {'color':'rgb(96,109,241)'}
            break;
          case 2:
            return {'color':'rgb(219,122,122)'}
            break;
          case 3:
            return {'color':'rgb(147,201,134)'}
            break;
          default:
            return {'color':'rgb(220,185,126)'}
        }
      }
      if(column.property === 'purchase_status'){
        switch (row.purchase_status){
          case 1:
            return {'color':'rgb(96,109,241)'}
            break;
          case 2:
            return {'color':'rgb(219,122,122)'}
            break;
          case 3:
            return {'color':'rgb(147,201,134)'}
            break;
          default:
            return {'color':'rgb(220,185,126)'}
        }
      }
      if(column.property === 'invite_status'){
        switch (row.invite_status){
          case 1:
            return {'color':'rgb(96,109,241)'}
            break;
          case 2:
            return {'color':'rgb(219,122,122)'}
            break;
          case 3:
            return {'color':'rgb(147,201,134)'}
            break;
          default:
            return {'color':'rgb(220,185,126)'}
        }
      }
      if(column.property === 'join_status'){
        switch (row.join_status){
          case 1:
            return {'color':'rgb(96,109,241)'}
            break;
          case 2:
            return {'color':'rgb(219,122,122)'}
            break;
          case 3:
            return {'color':'rgb(147,201,134)'}
            break;
          default:
            return {'color':'rgb(220,185,126)'}
        }
      }
    },

    //点击付款计划查看
    showPaymentPlan(row, column, cell){
      //console.log(column)
      if(column.property === 'sign_plan_count'){
        this.$refs['contractPaymentRegistration'].getSignPlan(row.id)
        this.$refs['contractPaymentRegistration'].isShow = true
      }
      if(column.property === 'fund_log_total'){
        this.$router.push(`/contract/paymentRegistrationList?contractId=${row.id}`)
      }
    },
    //招标文件审查
    async bidding(row){
      let baseInfo = {
        "项目名称":row?.name,
        "项目预算（万元）":row?.plan_price
      }
      let res = await getOatoken()
      let url =`${process.env.VUE_APP_OUT_URL}/admin/flow/create/27?oatoken=${res.oatoken}&out_contract_id=${row.id}&contract_json=${JSON.stringify(baseInfo)}`
      let bidding = window.open(url,'bidding',`top=${this.window.top},left=${this.window.left},width=${this.window.width},height=${this.window.height},location=0`)
    },

    //采购流程
    async buyProcess(row){
      let baseInfo = {
        "项目名称":row?.name,
        "采购形式":row?.purchase_type?.value,
        "采购方式":row?.purchase_way?.value,
        "项目类型":this.type.filter(item => {
          return item.value === row.type
        })[0]?.label,
        "项目预算（万元）":row?.plan_price,
        "资金渠道":row?.money_way?.value
      }
      let res = await getOatoken()
      let url = `${process.env.VUE_APP_OUT_URL}/admin/flow/create/2?oatoken=${res.oatoken}&out_contract_id=${row.id}&contract_json=${JSON.stringify(baseInfo)}`
      let buyProcess = window.open(url, 'buyProcess', `top=${this.window.top},left=${this.window.left},width=${this.window.width},height=${this.window.height},location=0`)
    },
    //会签流程
    async signProcess(row){
      let baseInfo = {
        "合同名称":row?.name,
        "执行部门":row?.carry_department,
        "合同金额（万元）":row?.money,
        //"承包商\\供应商":row.supply
      }
      let res = await getOatoken()
      let url = `${process.env.VUE_APP_OUT_URL}/admin/flow/create/3?oatoken=${res.oatoken}&out_contract_id=${row.id}&contract_json=${JSON.stringify(baseInfo)}`
      let signProcess = window.open(url, 'signProcess', `top=${this.window.top},left=${this.window.left},width=${this.window.width},height=${this.window.height},location=0`)
    },
    //请示流程
    async askProcess(row){
      let res = await getOatoken()
      let url = `${process.env.VUE_APP_OUT_URL}/admin/flow/create/17?oatoken=${res.oatoken}&out_contract_id=${row.id}`
      let askProcess = window.open(url, 'askProcess', `top=${this.window.top},left=${this.window.left},width=${this.window.width},height=${this.window.height},location=0`)
    },

    //防抖
    debounce(fn,delay=500){
      let timer = null
      return function _debounce() {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
          fn()
        }, delay)
      }
    },

    //翻页
    pageChange(e){
      this.select.pageIndex = e
      this.getContracts()
    },
    planPageChange(e){
      this.plansPageIndex = e
      this.getBudgets()
    },
    //日期选择
    datePick(e){
      this.select.startDate = e[0]
      this.select.endDate = e[1]
    },

    //获取预算计划
    async getBudgets(){
      let res = await getBudget({name:this.planSearch,page_size:10,page:this.plansPageIndex})
      this.plans = res.list.data
      this.planTotal = res.list.total
    },
    //获取资金渠道
    async getMoneyWay(){
      this.moneyWay = (await getparameter({number:'money_way'})).detail
    },
    //获取购买方式
    async getPurchaseWay(){
      this.purchaseWay = (await getparameter({number:'purchase_way'})).detail
    },
    //获取科室
    async getDepartment(){
      this.departments = await listdeptNoAuth()
    },
    //获取购买形式列表
    async getPurchaseType(){
      this.purchaseType = (await getparameter({number:'purchase_type'})).detail
    },

    //获取合同列表
    async getContracts(){
      const res = await getContract({
        keyword:this.select.keyword,
        page_size:10,
        page:this.select.pageIndex,
        start_created_at:this.select.startDate,
        end_created_at:this.select.endDate,
        type:this.select.type,
        department_id:this.select.department,
        purchase_type_id:this.select.purchaseModality,
        purchase_way_id:this.select.purchaseMethods,
        start_plan_price:this.select.priceMin,
        end_plan_price:this.select.priceMax,
        status:this.select.status
      })
      this.list = res.list.data
      this.total = res.list.total
      this.tableTotal.fundLogTotal = res.fund_log_total
      this.tableTotal.moneyTotal = Number(res.money_total).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
      this.tableTotal.planPriceTotal = Number(res.plan_price_total).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
    },


    //新建合同
    //显示
    async showPlan(){
      this.isShowPlan = true
      await this.getBudgets()
      this.toggleSelection(this.form.plan.map(item => {
        return item.value.plan_id
      }))
    },
    //选择计划
    selectPlan(sel,row){
      if(sel){
        //console.log(sel,row)
        this.form.plan = sel.map(item => {
          return {
            label:item.name,
            value:{
              plan_id:item.id,
              use_money:item.useMoney,
              new_money:item.money
            }
          }
        })
      }else{
        this.form.plan = []
      }
    },
    //默认选择计划
    toggleSelection(plans) {
      if (plans && plans.length > 0) {
        this.plans.filter(plan => {
          return plans.includes(plan.id)
        }).map(row => {
          this.$refs.planTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.planTable.clearSelection()
      }
    },
    delPlan(val){
      this.form.plan.map((item,index)=>{
        if(item.value.plan_id === val.value.plan_id){
          this.form.plan.splice(index,1)
        }
      })
    },
    //提交新建
    submit(){
      addContrant({
        type:this.form.type,
        is_plan:this.form.isBudget ? 1 : 0,
        purchase_type_id:this.form.methods,
        purchase_way_id:this.form.modality,
        money_way_id:`${this.form.fundingChannels.toString()}`,
        plan_price:this.form.price,
        name:this.form.name,
        contract_plan_links:this.form.plan.map(item=>{
          return item.value
        })
      }).then(res=>{
        this.isShowAdd = false
        Message({
          type:'success',
          message:'操作成功'
        })
        this.$refs['addContract'].reset()
        this.$refs['planTable'].clearSelection()
        this.getContracts()
      })
    },

    //删除合同
    deleteContract(id){
      delContract({id}).then(res=>{
        Message({
          type:'success',
          message:'操作成功'
        })
        this.getContracts()
      })
    },
  },
  mounted() {
    this.window.width = screen.availWidth * 0.95
    this.window.height = screen.availHeight * 0.95
    this.window.top = (window.screen.height - 30 - this.window.height)/2
    this.window.left = (window.screen.width - 10 - this.window.width)/2

    this.getPurchaseType()
    this.getContracts()
    this.getDepartment()
    this.getPurchaseWay()
    this.getMoneyWay()

    //页面激活后刷新合同列表
    window.onfocus = () => {
      this.getContracts()
    }
  },
  destroyed() {
    window.onfocus = null
  }
}
</script>

<style scoped lang="scss">
.selects{
  display: flex;
  flex-wrap: wrap;

  &>div{
    margin-bottom: 6px;
  }
}
.selectTop{
  margin-top: 10px;
}

.contract-add-plan{
  min-height: 30px;
  border: 1px solid #dcdee2;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;

  padding: 0 8px;
  &-no-plan{
    height: 30px;
    line-height: 30px;
    color: #CDD0D5;
  }
}



.slot-btns{
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;

  &-item{
    margin: 0 6px 4px 0;
  }
}

.xy-table-item-label{
  width: 140px;
}
.xy-table-item-price{
  position: relative;
  &::after{
    position: absolute;
    right: 0;
    top: 0;
    content:'（万元）'
  }
}
</style>