feat(销售订单): 添加合同来源类型选项，优化表单布局和代码格式

src/views/bpm/handleTask/components/saleOrder/accountstatement/saleForm.vue

@@ -5,28 +5,55 @@
       <el-col :span="12">
         <el-form-item label="来源类型" prop="sourceType">
           <el-select
-            :disabled="dialogType=='view'"
+            :disabled="dialogType == 'view'"
             clearable
             class="ele-block"
             v-model="dataForm.sourceType"
             @change="handleChange"
-            placeholder="请选择">
-            <el-option label="客户" :value="1"/>
+            placeholder="请选择"
+          >
+            <el-option label="客户" :value="1" />
             <!--            <el-option label="项目" :value="2"/>-->
-            <el-option label="销售订单" :value="3"/>
+            <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
+          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.orderNo" @click.native="handleGetOrd"></el-input>
+        <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"
+          ></el-input>
         </el-form-item>
       </el-col>
     </el-row>
@@ -34,44 +61,59 @@
       <el-col :span="12">
         <el-form-item label="查询方式" prop="dateType">
           <el-select
-            :disabled="dialogType=='view'"
+            :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"/>
+            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-form-item
+          label="选择年度"
+          prop="year"
+          v-if="[1].includes(dataForm.dateType)"
+        >
           <el-date-picker
-            :disabled="dialogType=='view'"
+            :disabled="dialogType == 'view'"
             v-model="dataForm.year"
             value-format="yyyy"
             type="year"
             style="width: 100%"
             @change="reloadTableData"
-            placeholder="选择年">
+            placeholder="选择年"
+          >
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="选择月度" prop="month" v-if="[3].includes(dataForm.dateType)">
+        <el-form-item
+          label="选择月度"
+          prop="month"
+          v-if="[3].includes(dataForm.dateType)"
+        >
           <el-date-picker
-            :disabled="dialogType=='view'"
+            :disabled="dialogType == 'view'"
             v-model="dataForm.month"
             value-format="yyyy-MM"
             type="month"
             @change="reloadTableData"
-            style="width: 100%">
+            style="width: 100%"
+          >
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="选择时间段" prop="dateTimeRange" v-if="[4].includes(dataForm.dateType)">
+        <el-form-item
+          label="选择时间段"
+          prop="dateTimeRange"
+          v-if="[4].includes(dataForm.dateType)"
+        >
           <el-date-picker
-            :disabled="dialogType=='view'"
+            :disabled="dialogType == 'view'"
             v-model="dataForm.dateTimeRange"
             value-format="yyyy-MM-dd"
             type="daterange"
@@ -79,191 +121,203 @@
             range-separator="至"
             start-placeholder="开始日期"
             end-placeholder="结束日期"
-            style="width: 100%">
+            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-form-item
+          label="选择年度"
+          prop="year"
+          v-if="[1, 2].includes(dataForm.dateType)"
+        >
           <el-date-picker
-            :disabled="dialogType=='view'"
+            :disabled="dialogType == 'view'"
             v-model="dataForm.year"
             value-format="yyyy"
             type="year"
             @change="reloadTableData"
             style="width: 100%"
-            placeholder="选择年">
+            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-form-item
+          label="选择季度"
+          prop="quarter"
+          v-if="[2].includes(dataForm.dateType)"
+        >
           <el-select
-            :disabled="dialogType=='view'"
+            :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="四季度"/>
+            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 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 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'"
+          v-if="taskDefinitionKey == 'uploadReceipt'"
           prop="repliedFiles"
-          label="回执附件">
-          <fileMain v-model="dataForm.repliedFiles" ></fileMain>
-
+          label="回执附件"
+        >
+          <fileMain v-model="dataForm.repliedFiles"></fileMain>
         </el-form-item>
       </el-col>
     </el-row>
-    <el-row v-if="dialogType!=='view'">
+    <el-row v-if="dialogType !== 'view'">
       <el-col :span="24">
-        <el-button style="float: right;" @click="handleSearch" type="primary">查询</el-button>
+        <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
+      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'},
-        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'},
-      },
+  import parentList from './customerListDialog.vue';
+  import OrderListDialog from './orderListDialog.vue';
+  import fileUpload from '@/components/upload/fileUpload.vue';
+  // import fileMain from "@/components/addDoc/index.vue";
 
-    }
-  },
-  methods: {
-    //查询
-    handleSearch() {
-      this.$emit('handleSearch', this.dataForm)
+  export default {
+    name: 'saleForm',
+    components: {
+      // fileMain,
+      fileUpload,
+      OrderListDialog,
+      parentList
     },
-    //
-    getDays() {
-
+    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' },
+          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'
+          }
+        }
+      };
     },
-    //获取客户信息
-    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', [])
+    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()
-    // }
-
-  },
-}
+    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;
-}
+  ::v-deep.el-divider {
+    margin: 10px;
+    font-weight: bold;
+  }
 </style>