kd-aiot-frontend-wt/src/views/bpm/handleTask/components/saleOrder/accountstatement/saleForm copy.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="sourceName"
          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"
          ></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 prop="createUserName" label="对账人">
          <el-input disabled v-model="dataForm.createUserName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="createTime" label="对账时间">
          <el-input disabled v-model="dataForm.createTime"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          v-if="taskDefinitionKey == 'uploadReceipt'"
          prop="repliedFiles"
          label="回执附件"
        >
          <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 './customerListDialog.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,
      fileUpload,
      OrderListDialog,
      parentList
    },
    props: ['dataForm', 'datasource', 'dialogType', 'taskDefinitionKey'],
    data() {
      return {
        monthByDays: {},

        rules: {
          sourceType: { required: true, message: '请选择', trigger: 'change' },
          contactId: { required: true, message: '请选择', trigger: 'change' },
          projectId: { 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.partaId,
          contactName: obj.partaName,
          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>