kd-aiot-frontend-eom/src/views/saleManage/saleOrder/accountstatement/components/saleForm.vue

<template>
  <el-form ref="form" :model="dataForm" :rules="rules" label-width="120px">
    <headerTitle title="对账单信息"></headerTitle>
    <el-row>
      <el-col :span="8">
        <el-form-item label="来源类型" prop="sourceType">
          <el-select
            :disabled="dialogType == 'view' || !!saleOrderData?.id"
            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="8">
        <el-form-item
          label="选择客户"
          prop="contactId"
          v-if="dataForm.sourceType == 1"
        >
          <el-input
            :disabled="dialogType == 'view' || !!contactData?.id"
            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="sourceId"
          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-col :span="8">
        <el-form-item label="查询维度" prop="queryDimension">
          <el-select
            disabled
            clearable
            class="ele-block"
            v-model="dataForm.queryDimension"
            placeholder="请选择"
          >
            <el-option label="按发货单" :value="1" />
            <el-option label="按调拨单" :value="2" />
            <el-option label="按收货单" :value="3" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <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="8" 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
            :key="dataForm.dateType"
            :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="8" 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="8" 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="8">
        <el-form-item prop="createUserName" label="对账金额">
          <el-input disabled v-model="accountStatementPrice"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item prop="createUserName" label="关联订单编码">
          <el-input disabled v-model="relatedOrderNumber"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="dialogType == 'view'">
        <el-form-item prop="createUserName" label="对账人">
          <el-input disabled v-model="dataForm.createUserName"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8" v-if="dialogType == 'view'">
        <el-form-item prop="createTime" label="对账时间">
          <el-input disabled v-model="dataForm.createTime"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-if="dialogType == 'view'">
      <el-col :span="12">
        <el-form-item prop="repliedFiles" label="回执附件">
          <fileMain v-model="dataForm.repliedFiles" type="view"></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"
      :contactData="contactData"
    ></orderListDialog>
    <contractListDialog
      ref="selectContractRef"
      @changeParent="changeContract"
      :type="1"
      :isAdd="true"
    ></contractListDialog>
  </el-form>
</template>
<script xmlns:el-col="http://www.w3.org/1999/html">
  import parentList from '@/views/saleManage/contact/components/parentList.vue';
  import OrderListDialog from './orderListDialog.vue';
  import { getFile } from '@/api/system/file';
  // import fileMain from '@/components/addDoc/index.vue';
  import contractListDialog from '@/views/saleManage/saleOrder/components/contractListDialog.vue';
import { accountStatementExportAPI } from '@/api/saleManage/accountstatement';

  export default {
    name: 'saleForm',
    components: { OrderListDialog, parentList, 
      // fileMain,
       contractListDialog },
    //客户管理数据
    props: {
      dataForm: {
        type: Object,
        default: () => {
          return {};
        }
      },
      datasource: {
        type: Array,
        default: () => {
          return [];
        }
      },
      dialogType: '',
      contactData: {
        type: Object,
        default: () => {
          return {};
        }
      },
      saleOrderData: {
        type: Object,
        default: () => {
          return {};
        }
      },
      // recorpayList: {
      //   type: Object,
      //   default: () => {
      //     return [];
      //   }
      // },
      
    },
    data() {
      return {
        monthByDays: {},
        quarterList: {
          一季度: ['-01-01 00:00:00', '-03-31 23:59:59'],
          二季度: ['-04-01 00:00:00', '-06-30 23:59:59'],
          三季度: ['-07-01 00:00:00', '-09-30 23:59:59'],
          四季度: ['-10-01 00:00:00', '-12-31 23:59:59']
        },
        startTime: '-01-01 00:00:00',
        endTime: '23: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'
          },
          sourceId: { required: true, message: '请选择', trigger: 'change' },
          contractId: { required: true, message: '请选择', trigger: 'change' },
          queryDimension: { required: true, message: '请选择', trigger: 'change' },
        }
      };
    },
    computed: {
      //计算未对账金额
      accountStatementPrice() {
        return this.datasource.reduce((pre, cur) => pre + +cur.amountTotalPrice, 0);
      },
      //计算相关订单号
      relatedOrderNumber() {
        return this.datasource.map((item) => item.orderNo).join(',');
      }
    },
    methods: {
      //查询
      handleSearch() {
        //
        switch (this.dataForm.dateType) {
          case 1:
            this.dataForm.dateValue = this.dataForm.year;
            this.dataForm.startDate = this.dataForm.year + this.startTime;
            this.dataForm.endDate = this.dataForm.year + '-12-31 23:59:59';
            break;
          case 2:
            this.dataForm.dateValue =
              this.dataForm.year + '年-' + this.dataForm.quarter;
            this.dataForm.startDate =
              this.dataForm.year + this.quarterList[this.dataForm.quarter][0];
            this.dataForm.endDate =
              this.dataForm.year + this.quarterList[this.dataForm.quarter][1];
            break;
          case 3:
            this.dataForm.dateValue = this.dataForm.month;
            this.dataForm.startDate = this.dataForm.month + '-01 00:00:00';
            let data = this.dataForm.month.split('-');
            let days = new Date(data[0], data[1], 0).getDate();
            this.dataForm.endDate =
              this.dataForm.month + '-' + days + ' 23:59:59';
            break;
          default:
            this.dataForm.dateValue = '';
            this.dataForm.startDate =
              this.dataForm.dateTimeRange[0] + ' 00:00:00';
            this.dataForm.endDate =
              this.dataForm.dateTimeRange[1] + ' 23:59:59';
        }
        this.$refs.form.validate((validate) => {
          if (!validate) return;
          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();
      },
      //获取合同信息
      handleGetContract() {
        this.$refs.selectContractRef.open();
      },
      changeContract(obj) {
        let params = Object.assign({}, this.dataForm, {
          contractId: obj.id,
          contractName: obj.contractName,
          sourceId: obj.id,
          sourceName: obj.contractName,
          contactId: obj.partaId,
          contactName: obj.partaName
        });
        this.$emit('update:dataForm', params);
        this.reloadTableData();
      },
      //获取订单信息
      handleGetOrd() {
        let item = { id: this.dataForm.orderId };
        this.$refs.orderListDialogRef.open(item);
      },
      //选择订单信息回调
      getOrderInfo(obj) {
        this.dataForm.sourceType = 3;
        let params = Object.assign({}, this.dataForm, {
          orderId: obj.id,
          orderNo: obj.orderNo,
          contactId: obj.partaId,
          contactName: obj.partaName,
          sourceName: obj.orderNo,
          sourceId: obj.id
        });
        this.$emit('update:dataForm', params);
        this.reloadTableData();
      },
      //切换来源类型重置数据
      handleChange(val) {
        let params = Object.assign(
          {},
          {
            ...this.dataForm,
            orderNo: '',
            orderId: '',
            contactId: '',
            contactName: '',
            sourceName: '',
            sourceId: '',
            amountPayablePrice: '',
            amountReceivablePrice: '',
            amountTotalPrice: '',
            amountPayablePass: '',
            amountReceivablePass: ''
          }
        );

        this.$emit('update:dataForm', params);
        this.reloadTableData();
        if (val == 1 && this.contactData.id) {
          this.getCusInfo(this.contactData);
        }
      },
      reloadTableData() {
        this.$emit('update:datasource', []);
        // this.$emit('update:recorpayList', []);
      },
      downloadFile(file) {
        getFile({ objectName: file.storePath }, file.name);
      }
    },
    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"></style>