kd-aiot-frontend-wt/src/views/bpm/handleTask/components/purchaseOrder/accountstatement/purchaseForm.vue

<template>
  <el-form ref="form" :model="dataForm" :rules="rules" label-width="120px">
    <headerTitle title="对账单信息"></headerTitle>
    <el-row>
      <el-col :span="12">
        <el-form-item label="来源类型" prop="sourceType">
          <el-select
            :disabled="dialogType=='view'"
            clearable
            class="ele-block"
            v-model="dataForm.sourceType"
            @change="handleChange"
            placeholder="请选择">
            <el-option label="供应商" :value="1" />
            <!-- <el-option label="项目" :value="2"/> -->
            <el-option label="合同" :value="4" />

            <el-option label="采购订单" :value="3" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="选择供应商" prop="contactId" v-if="dataForm.sourceType ==1">
          <el-input :disabled="dialogType=='view'" v-model="dataForm.contactName"
                    @click.native="handleGetCus"></el-input>
        </el-form-item>
        <!--        <el-form-item label="选择项目" prop="projectId" v-if="dataForm.sourceType ==2">-->
        <!--          <el-input :disabled="dialogType=='view'" v-model="dataForm.projectId" @click.native="handleGetOrd"></el-input>-->
        <!--        </el-form-item>-->
        <el-form-item label="选择订单" prop="orderId" v-if="dataForm.sourceType ==3">
          <el-input :disabled="dialogType=='view'" v-model="dataForm.sourceName" @click.native="handleGetOrd"></el-input>
        </el-form-item>
        <el-form-item
          label="选择合同"
          prop="contractId"
          v-if="dataForm.sourceType == 4"
        >
          <el-input
           :disabled="dialogType=='view'"
            v-model="dataForm.sourceName"
            @click.native="handleGetContract"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="查询方式" prop="dateType">
          <el-select
            :disabled="dialogType=='view'"
            clearable
            class="ele-block"
            v-model="dataForm.dateType"
            @change="reloadTableData"
            placeholder="请选择">
            <el-option label="按年度" :value="1"/>
            <el-option label="按季度" :value="2"/>
            <el-option label="按月度" :value="3"/>
            <el-option label="按时间段" :value="4"/>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="![2].includes(dataForm.dateType)">
        <el-form-item label="选择年度" prop="year" v-if="[1].includes(dataForm.dateType)">
          <el-date-picker
            :disabled="dialogType=='view'"
            v-model="dataForm.year"
            value-format="yyyy"
            type="year"
            style="width: 100%"
            @change="reloadTableData"
            placeholder="选择年">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="选择月度" prop="month" v-if="[3].includes(dataForm.dateType)">
          <el-date-picker
            :disabled="dialogType=='view'"
            v-model="dataForm.month"
            value-format="yyyy-MM"
            type="month"
            @change="reloadTableData"
            style="width: 100%">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="选择时间段" prop="dateTimeRange" v-if="[4].includes(dataForm.dateType)">
          <el-date-picker
            :disabled="dialogType=='view'"
            v-model="dataForm.dateTimeRange"
            value-format="yyyy-MM-dd"
            type="daterange"
            @change="reloadTableData"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 100%">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="6" v-if="[2].includes(dataForm.dateType)">
        <el-form-item label="选择年度" prop="year" v-if="[1,2].includes(dataForm.dateType)">
          <el-date-picker
            :disabled="dialogType=='view'"
            v-model="dataForm.year"
            value-format="yyyy"
            type="year"
            @change="reloadTableData"
            style="width: 100%"
            placeholder="选择年">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="6" v-if="[2].includes(dataForm.dateType)">
        <el-form-item label="选择季度" prop="quarter" v-if="[2].includes(dataForm.dateType)">
          <el-select
            :disabled="dialogType=='view'"
            clearable
            @change="reloadTableData"
            class="ele-block"
            v-model="dataForm.quarter"
            placeholder="请选择">
            <el-option label="一季度" value="一季度"/>
            <el-option label="二季度" value="二季度"/>
            <el-option label="三季度" value="三季度"/>
            <el-option label="四季度" value="四季度"/>
          </el-select>
        </el-form-item>
      </el-col>

    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item
          v-if="taskDefinitionKey=='uploadReceipt'"
          prop="repliedFiles"
          label="回执附件">
          <!-- <fileUpload
            v-model="dataForm.repliedFiles"
            module="main"
            :showLib="false"
            :limit="10"
          /> -->
          <fileMain v-model="dataForm.repliedFiles"></fileMain>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-if="dialogType!=='view'">
      <el-col :span="24">
        <el-button style="float: right;" @click="handleSearch" type="primary">查询</el-button>
      </el-col>
    </el-row>
    <parentList ref="parentRef" @changeParent="getCusInfo"></parentList>
    <orderListDialog ref="orderListDialogRef" @changeParent="getOrderInfo"
    ></orderListDialog>
  </el-form>
</template>
<script xmlns:el-col="http://www.w3.org/1999/html">
import parentList from "./supplierList.vue";
import OrderListDialog from "./orderListDialog.vue";
// import fileUpload from "@/components/upload/fileUpload.vue";
// import fileMain from "@/components/addDoc/index.vue";

export default {
  name: "saleForm",
  components: {
    // fileMain, 
    
    OrderListDialog, parentList},
  props: ['dataForm', 'datasource', 'dialogType', 'taskDefinitionKey'],
  data() {
    return {
      monthByDays: {},
      quarterList: {
        '一季度': ['-01-01 00:00:00', '-03-31 12:59:59'],
        '二季度': ['-04-01 00:00:00', '-06-30 12:59:59'],
        '三季度': ['-07-01 00:00:00', '-09-30 12:59:59'],
        '四季度': ['-10-01 00:00:00', '-12-31 12:59:59'],
      },
      startTime: '-01-01 00:00:00',
      endTime: '12:59:59',
      rules: {
        sourceType: {required: true, message: '请选择', trigger: 'change'},
        contactId: {required: true, message: '请选择', trigger: 'change'},
        projectId: {required: true, message: '请选择', trigger: 'change'},
        // orderId: {required: true, message: '请选择', trigger: 'change'},
        dateType: {required: true, message: '请选择', trigger: 'change'},
        year: {required: true, message: '请选择', trigger: 'change'},
        quarter: {required: true, message: '请选择', trigger: 'change'},
        month: {required: true, message: '请选择', trigger: 'change'},
        dateTimeRange: {required: true, message: '请选择', trigger: 'change'},
        repliedFiles: {required: this.taskDefinitionKey == 'uploadReceipt', message: '请上传', trigger: 'change'},
      },

    }
  },
  methods: {
    //查询
    handleSearch() {
      this.$emit('handleSearch', this.dataForm)
    },
    //
    getDays() {


    },
    //获取客户信息
    handleGetCus() {
      let item = {id: this.dataForm.contactId};
      this.$refs.parentRef.open(item);
    },
    //选择客户信息回调
    getCusInfo(obj) {
      let params = Object.assign({}, this.dataForm, {
        contactId: obj.id,
        contactName: obj.name,
        sourceName: obj.name,
        sourceId: obj.id,
      });
      this.$emit('update:dataForm', params)
      this.reloadTableData()
    },
    //获取订单信息
    handleGetOrd() {
      let item = {id: this.dataForm.orderId};
      this.$refs.orderListDialogRef.open(item);
    },
    //选择订单信息回调
    getOrderInfo(obj) {
      let params = Object.assign({}, this.dataForm, {
        orderId: obj.id,
        orderNo: obj.orderNo,
        contactId: obj.partbId,
        contactName: obj.partbName,
        sourceName: obj.orderNo,
        sourceId: obj.id,
      });
      this.$emit('update:dataForm', params)
      this.reloadTableData()
    },
    //切换来源类型重置数据
    handleChange() {
      let params = Object.assign({}, {
        ...this.dataForm,
        orderNo: '',
        orderId: '',
        contactId: '',
        contactName: '',
        sourceName: '',
        sourceId: '',
      })
      this.$emit('update:dataForm', params)
      this.reloadTableData()
    },
    reloadTableData() {
      this.$emit('update:datasource', [])
    },

  },
  mounted() {
    // const year = new Date().getFullYear(); // 获取当前年份
    // for (let i = 0; i < 12; i++) {
    //   // 获取指定月份的天数
    //   this.monthByDays[i + 1] = new Date(year, i + 1, 0).getDate()
    // }

  },
}
</script>



<style scoped lang="scss">
::v-deep.el-divider {
  margin: 10px;
  font-weight: bold;
}
</style>