进口商、出口商编辑功能，报关单模块

src/api/businessManage/tradeRelations.js

@@ -18,6 +18,15 @@ export function addImporter(data) {
   })
 }
 
+// 添加进口商
+export function updateImporter(data) {
+  return request({
+    url: '/importerEntity/update',
+    method: 'post',
+    data
+  })
+}
+
 // 进口商详情
 export function getImporterDetails(params) {
   return request({
@@ -45,6 +54,15 @@ export function addSupplier(data) {
   })
 }
 
+// 修改供应商
+export function updateSupplier(data) {
+  return request({
+    url: '/vendorEntity/update',
+    method: 'post',
+    data
+  })
+}
+
 // 供应商详情
 export function getSupplierDetails(params) {
   return request({

src/api/myTrade/salesBill.js

@@ -156,3 +156,30 @@ export function getTransportDetail(params) {
     params
   })
 }
+
+// 报关单 ---------------------------------------
+
+// 报关单列表
+export function declarationFormList(params) {
+  return request({
+    url: '/customsDeclaration/queryList',
+    method: 'get',
+    params
+  })
+}
+// 报关单详情
+export function declarationFormDetail(params) {
+  return request({
+    url: '/customsDeclaration/getDetailById',
+    method: 'get',
+    params
+  })
+}
+// 报关单进口商
+export function entryEntityList(params) {
+  return request({
+    url: '/importerEntity/getEnabledByUserId',
+    method: 'get',
+    params
+  })
+}

src/router/moudules/businessManage.js

@@ -33,6 +33,13 @@ export default {
           hidden: true,
           meta: { title: '添加进口商', activeMenu: '/tradeRelations' }
         },
+        {
+          path: '/importerUpdate/:id',
+          name: 'ImporterUpdate',
+          component: () => import('@/views/businessManage/tradeRelations/importer/edit'),
+          hidden: true,
+          meta: { title: '修改进口商', activeMenu: '/tradeRelations' }
+        },
         {
           path: '/importerView/:id',
           name: 'ImporterView',
@@ -47,6 +54,13 @@ export default {
           hidden: true,
           meta: { title: '添加供应商', activeMenu: '/tradeRelations' }
         },
+        {
+          path: '/supplierUpdate/:id',
+          name: 'SupplierUpdate',
+          component: () => import('@/views/businessManage/tradeRelations/supplier/edit'),
+          hidden: true,
+          meta: { title: '修改供应商', activeMenu: '/tradeRelations' }
+        },
         {
           path: '/supplierView/:id',
           name: 'SupplierView',

src/router/moudules/myTrade.js

@@ -147,6 +147,15 @@ export default {
           meta: {
             title: '销售物流详情', activeMenu: '/salesBill'
           }
+        },
+        {
+          path: 'declarationFormView',
+          name: 'DeclarationFormView',
+          component: () => import('@/views/myTrade/salesBill/declarationForm/view'),
+          hidden: true,
+          meta: {
+            title: '报关单详情', activeMenu: '/salesBill'
+          }
         }
       ]
     },

src/store/modules/constant.js

@@ -29,7 +29,9 @@ export default {
       sys_sign_status: [], // 企业签署状态
       sales_order_status: [], // 销售订单状态
       purchase_order_status: [], // 采购订单状态
-      rebate_process_status: [] // 退税处理状态
+      rebate_process_status: [], // 退税处理状态
+      declaration_status: [], // 我的贸易-购销合同-报关结关状态
+      business_category: [] // 经营品类
     }
   },
   mutations: {

src/styles/index.scss

@@ -104,3 +104,8 @@ div:focus {
   font-size: 12px;
   color: #838080;
 }
+
+
+input::-webkit-inner-spin-button {
+  display: none;
+}

src/views/businessManage/tradeRelations/importer/components/BasicInfo.vue

@@ -10,15 +10,6 @@
     >
 
       <cy-info-title style="margin: 0px -15px 10px;"> 基础信息 </cy-info-title>
-      <el-form-item label="进口商名称" prop="entityName">
-        <el-input v-model="ruleForm.entityName" placeholder="请输入" :disabled="disabled" />
-      </el-form-item>
-      <el-form-item label="注册号" prop="certNo">
-        <el-input v-model="ruleForm.certNo" placeholder="请输入" :disabled="disabled" />
-      </el-form-item>
-      <el-form-item label="税号（VAT Number）" prop="vatNo">
-        <el-input v-model="ruleForm.vatNo" placeholder="请输入" :disabled="disabled" />
-      </el-form-item>
       <el-form-item label="所属区域" prop="region">
         <el-select v-model="ruleForm.region" placeholder="请选择" :disabled="disabled">
           <el-option
@@ -44,6 +35,15 @@
           />
         </el-select>
       </el-form-item>
+      <el-form-item label="进口商名称" prop="entityName">
+        <el-input v-model="ruleForm.entityName" placeholder="请输入" :disabled="disabled" />
+      </el-form-item>
+      <el-form-item label="注册号" prop="certNo">
+        <el-input v-model="ruleForm.certNo" placeholder="请输入" :disabled="disabled" />
+      </el-form-item>
+      <el-form-item label="税号（VAT Number）" prop="vatNo">
+        <el-input v-model="ruleForm.vatNo" placeholder="请输入" :disabled="disabled" />
+      </el-form-item>
       <el-form-item label="经营地址（省 / 州 / 区）" prop="businessProvince">
         <el-input v-model="ruleForm.businessProvince" placeholder="请输入" :disabled="disabled" />
       </el-form-item>
@@ -75,6 +75,75 @@
       <el-form-item label="企业联系人邮箱" prop="contactEmail">
         <el-input v-model="ruleForm.contactEmail" placeholder="请输入有效的邮箱地址" :disabled="disabled" />
       </el-form-item>
+
+      <cy-info-title style="margin: 0px -15px 10px;"> 核额信息 </cy-info-title>
+      <el-form-item label="交易品类" prop="businessCategory1">
+        <el-select v-model="ruleForm.businessCategory1" placeholder="请选择" multiple :disabled="disabled">
+          <el-option
+            v-for="item in constant.business_category"
+            :key="item.dictCode"
+            :label="item.dictLabel"
+            :value="item.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="交易年限" prop="tradeTime">
+        <div class="select-input-item">
+          <el-input v-model="ruleForm.tradingLife1" placeholder="请输入交易年限" :disabled="disabled" @change="setParams($event, 'tradeTime', 'tradeTimeUnit')" />
+          <el-select v-model="ruleForm.tradeTimeUnit" placeholder="请选择" :disabled="disabled" style="width: 150px;" @change="setParams($event, 'tradeTime', 'tradingLife1')">
+            <el-option
+              v-for="item in [{value: 'M', name: 'Month(s)'}, {value: 'Y', name: 'Year(s)'}]"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+      </el-form-item>
+      <el-form-item label="结算账期" prop="settlementPeriod">
+        <el-input v-model="ruleForm.settlementPeriod" placeholder="请输入有效的邮箱地址" :disabled="disabled">
+          <template slot="suffix">Days</template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="过去1年双方交易额" prop="tradeForOneYear">
+        <div class="select-input-item">
+          <el-select v-model="ruleForm.tradingAmountPastYearCurrency" placeholder="请选择" :disabled="disabled" style="width: 150px;" @change="setParams($event, 'tradeForOneYear', 'tradingAmountPastYear')">
+            <el-option
+              v-for="item in constant.currency_code"
+              :key="item.dictCode"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            />
+          </el-select>
+          <el-input v-model="ruleForm.tradingAmountPastYear" placeholder="请输入交易年限" :disabled="disabled" @change="setParams($event, 'tradeForOneYear', 'tradingAmountPastYearCurrency')" />
+        </div>
+      </el-form-item>
+      <el-form-item label="拟申请额度金额" prop="applyMoney">
+        <div class="select-input-item">
+          <el-select v-model="ruleForm.amountToBeAppliedCurrency" placeholder="请选择" :disabled="disabled" style="width: 150px;" @change="setParams($event, 'applyMoney', 'amountToBeApplied')">
+            <el-option
+              v-for="item in constant.currency_code"
+              :key="item.dictCode"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            />
+          </el-select>
+          <el-input v-model="ruleForm.amountToBeApplied" placeholder="请输入拟申请额度金额" :disabled="disabled" @change="setParams($event, 'applyMoney', 'amountToBeAppliedCurrency')" />
+        </div>
+      </el-form-item>
+      <el-form-item label="拟申请额度期限" prop="applyTime">
+        <div class="select-input-item">
+          <el-input v-model="ruleForm.periodToBeApplied1" placeholder="请输入拟申请额度期限" :disabled="disabled" @change="setParams($event, 'applyTime', 'applyTimeUnit')" />
+          <el-select v-model="ruleForm.applyTimeUnit" placeholder="请选择" :disabled="disabled" style="width: 150px;" @change="setParams($event, 'applyTime', 'periodToBeApplied1')">
+            <el-option
+              v-for="item in [{value: 'M', name: 'Month(s)'}, {value: 'Y', name: 'Year(s)'}]"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+      </el-form-item>
     </el-form>
 
     <div class="submit-btn">
@@ -88,7 +157,7 @@
 <script>
 import { mapGetters } from 'vuex'
 import store from '@/store'
-import { getImporterDetails, addImporter } from '@/api/businessManage/tradeRelations'
+import { getImporterDetails, addImporter, updateImporter } from '@/api/businessManage/tradeRelations'
 import { validMail } from '@/utils/validate'
 export default {
   props: {
@@ -140,7 +209,21 @@ export default {
         contactDirectInd: '',
         contactName: '',
         contactMobile: '',
-        contactEmail: ''
+        contactEmail: '',
+        tradeTime: '',
+        tradeTimeUnit: '',
+        tradeForOneYear: '',
+        applyMoney: '',
+        applyTime: '',
+        periodToBeApplied1: '',
+        applyTimeUnit: '',
+        amountToBeApplied: '',
+        amountToBeAppliedCurrency: '',
+        tradingAmountPastYear: '',
+        tradingAmountPastYearCurrency: '',
+        settlementPeriod: '',
+        tradingLife1: '',
+        businessCategory1: []
       },
       rules: {
         entityName: [{ required: true, trigger: 'blur', message: '请输入进口商名称' }],
@@ -154,7 +237,13 @@ export default {
         contactName: [{ required: true, trigger: 'blur', message: '请输入企业联系人姓名' }],
         // contactMobile: [{ required: true, validator: validateMobile, trigger: 'blur' }],
         contactMobile: [{ required: true, trigger: 'blur', message: '请输入联系电话' }],
-        contactEmail: [{ required: true, validator: validContactEmail, trigger: 'blur' }]
+        contactEmail: [{ required: true, validator: validContactEmail, trigger: 'blur' }],
+        tradeTime: [{ required: true, trigger: 'blur', message: '请输入交易年限' }],
+        tradeForOneYear: [{ required: true, trigger: 'blur', message: '请输入过去1年双方交易额' }],
+        applyMoney: [{ required: true, trigger: 'blur', message: '请输入拟申请额度金额' }],
+        applyTime: [{ required: true, trigger: 'blur', message: '请输入拟申请额度期限' }],
+        businessCategory1: [{ required: true, trigger: 'change', message: '请选择交易品类' }],
+        settlementPeriod: [{ required: true, trigger: 'blur', message: '请输入结算账期' }]
       },
       disabled: false,
       countryList: []
@@ -166,10 +255,12 @@ export default {
   },
   created() {
     this.ruleForm.customerUserId = store.getters.userInfo.id
-    this.$store.dispatch('getConstant', ['sys_yes_no', 'district_code', 'countryList'])
-    if (this.source === 'view') {
+    this.$store.dispatch('getConstant', ['sys_yes_no', 'district_code', 'countryList', 'business_category', 'currency_code'])
+    if (this.source === 'view' || this.source === 'edit') {
       this.getDetailInfo()
-      this.disabled = true
+      if (this.source === 'view') {
+        this.disabled = true
+      }
     }
   },
   methods: {
@@ -182,9 +273,18 @@ export default {
 
           for (const k in this.ruleForm) {
             if (data[k] !== '' && data[k] !== null && data[k] !== undefined) {
-              this.ruleForm[k] = data[k]
+              this.ruleForm[k] = data[k] === 0 ? '0' : data[k]
             }
           }
+          this.ruleForm.businessCategory1 = data.businessCategory ? data.businessCategory.split(',') : []
+          if (data.tradingLife) {
+            this.ruleForm.tradingLife1 = data.tradingLife.slice(0, data.tradingLife.length - 1)
+            this.ruleForm.tradeTimeUnit = data.tradingLife.slice(-1)
+          }
+          if (data.periodToBeApplied) {
+            this.ruleForm.periodToBeApplied1 = data.periodToBeApplied.slice(0, data.periodToBeApplied.length - 1)
+            this.ruleForm.applyTimeUnit = data.periodToBeApplied.slice(-1)
+          }
         }
       })
     },
@@ -194,6 +294,9 @@ export default {
         Loading: true,
         ...this.ruleForm
       }
+      if (this.source === 'edit') {
+        params.id = this.$route.params.id
+      }
 
       if (submitType === 'temp') {
         params.submitStatus = 0
@@ -201,6 +304,9 @@ export default {
       } else if (submitType === 'submit') {
         this.$refs.ruleFormRef.validate(valid => {
           if (valid) {
+            params.businessCategory = this.ruleForm.businessCategory1.join(',')
+            params.tradingLife = `${this.ruleForm.tradingLife1}${this.ruleForm.tradeTimeUnit}`
+            params.periodToBeApplied = `${this.ruleForm.periodToBeApplied1}${this.ruleForm.applyTimeUnit}`
             this.submit(params, submitType)
           } else {
             this.$message.warning('必填项不能为空')
@@ -208,26 +314,47 @@ export default {
         })
       }
     },
-    submit(data, submitType) {
-      addImporter(data).then((res) => {
-        if (res.success) {
-          if (submitType === 'submit') {
-            this.$message.success('提交成功')
-            this.closePage()
-          } else {
-            this.$message.success('暂存成功')
-            this.closePage()
-          }
+    async submit(data, submitType) {
+      const res = this.source === 'edit' ? await updateImporter(data).catch(() => {}) : await addImporter(data).catch(() => {})
+      if (!res) return
+      if (res.success) {
+        if (submitType === 'submit') {
+          this.$message.success('提交成功')
+          this.closePage()
         } else {
-          this.$message.warning(res.msg)
+          this.$message.success('暂存成功')
+          this.closePage()
         }
-      })
+      } else {
+        this.$message.warning(res.msg)
+      }
+      // addImporter(data).then((res) => {
+      //   if (res.success) {
+      //     if (submitType === 'submit') {
+      //       this.$message.success('提交成功')
+      //       this.closePage()
+      //     } else {
+      //       this.$message.success('暂存成功')
+      //       this.closePage()
+      //     }
+      //   } else {
+      //     this.$message.warning(res.msg)
+      //   }
+      // })
     },
 
     closePage() {
       this.$router.push({
         name: 'TradeRelations'
       })
+    },
+    setParams(val, key, otherKey) {
+      if (val && this.ruleForm[otherKey]) {
+        this.ruleForm[key] = val + this.ruleForm[otherKey]
+      } else {
+        this.ruleForm[key] = ''
+      }
+      this.$refs.ruleFormRef.validateField(key)
     }
   }
 }
@@ -264,5 +391,10 @@ export default {
         color: #ff0000;
         margin-right: 5px;
     }
+    .select-input-item {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+    }
 }
 </style>

src/views/businessManage/tradeRelations/importer/edit.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="importer-Add">
+    <importer-edit source="edit" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ImporterAdd',
+  components: {
+    importerEdit: () => import('./components/BasicInfo')
+  },
+  methods: {
+
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/businessManage/tradeRelations/importer/index.vue

@@ -136,13 +136,13 @@ export default {
           label: '操作',
           render: (h, row) => {
             const btnList = [
-              // {
-              //   msg: '编辑',
-              //   icon: 'iconfont icon-a-Group8151',
-              //   rowPower: ['', null],
-              //   power: 'projectNumber:delete',
-              //   category: 'edit'
-              // },
+              {
+                msg: '编辑',
+                icon: 'iconfont icon-a-Group8151',
+                // rowPower: ['', null],
+                // power: 'projectNumber:delete',
+                category: 'edit'
+              },
               {
                 msg: '详情',
                 icon: 'iconfont icon-a-Group957',
@@ -220,6 +220,16 @@ export default {
             type: 'view'
           }
         })
+      } else if (type === 'edit') {
+        this.$router.push({
+          name: 'ImporterUpdate',
+          params: {
+            id: row.id
+          },
+          query: {
+            type: 'view'
+          }
+        })
       }
     },
     addImporter() {

src/views/businessManage/tradeRelations/supplier/components/BasicInfo.vue

@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import { getSupplierDetails, addSupplier } from '@/api/businessManage/tradeRelations'
+import { getSupplierDetails, addSupplier, updateSupplier } from '@/api/businessManage/tradeRelations'
 import { validIdcard, validMail, validNumber, validPhone } from '@/utils/validate'
 import store from '@/store'
 export default {
@@ -131,9 +131,11 @@ export default {
   },
   created() {
     this.ruleForm.customerUserId = store.getters.userInfo.id
-    if (this.source === 'view') {
+    if (this.source === 'view' || this.source === 'edit') {
       this.getDetailInfo()
-      this.disabled = true
+      if (this.source === 'view') {
+        this.disabled = true
+      }
     }
   },
   methods: {
@@ -156,7 +158,9 @@ export default {
         Loading: true,
         ...this.ruleForm
       }
-
+      if (this.source === 'edit') {
+        params.id = this.$route.params.id
+      }
       if (submitType === 'temp') {
         this.submit(params, submitType)
       } else if (submitType === 'submit') {
@@ -169,20 +173,33 @@ export default {
         })
       }
     },
-    submit(data, submitType) {
-      addSupplier(data).then((res) => {
-        if (res.success) {
-          if (submitType === 'submit') {
-            this.$message.success('提交成功')
-            this.closePage()
-          } else {
-            this.$message.success('暂存成功')
-            this.closePage()
-          }
+    async submit(data, submitType) {
+      const result = this.source === 'edit' ? await updateSupplier(data).catch(() => {}) : await addSupplier(data).catch(() => {})
+      if (!result) return
+      if (result.success) {
+        if (submitType === 'submit') {
+          this.$message.success('提交成功')
+          this.closePage()
         } else {
-          this.$message.warning(res.msg)
+          this.$message.success('暂存成功')
+          this.closePage()
         }
-      })
+      } else {
+        this.$message.warning(result.msg)
+      }
+      // addSupplier(data).then((res) => {
+      //   if (res.success) {
+      //     if (submitType === 'submit') {
+      //       this.$message.success('提交成功')
+      //       this.closePage()
+      //     } else {
+      //       this.$message.success('暂存成功')
+      //       this.closePage()
+      //     }
+      //   } else {
+      //     this.$message.warning(res.msg)
+      //   }
+      // })
     },
 
     closePage() {

src/views/businessManage/tradeRelations/supplier/edit.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="supplier-add">
+    <supplier-edit source="edit" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SupplierAdd',
+  components: {
+    supplierEdit: () => import('./components/BasicInfo')
+  },
+  methods: {
+
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/businessManage/tradeRelations/supplier/index.vue

@@ -89,13 +89,13 @@ export default {
           label: '操作',
           render: (h, row) => {
             const btnList = [
-              // {
-              //   msg: '编辑',
-              //   icon: 'iconfont icon-a-Group8151',
-              //   rowPower: ['', null],
-              //   power: 'projectNumber:delete',
-              //   category: 'edit'
-              // },
+              {
+                msg: '编辑',
+                icon: 'iconfont icon-a-Group8151',
+                // rowPower: ['', null],
+                // power: 'projectNumber:delete',
+                category: 'edit'
+              },
               {
                 msg: '详情',
                 icon: 'iconfont icon-a-Group957',
@@ -173,6 +173,16 @@ export default {
             type: 'view'
           }
         })
+      } else if (type === 'edit') {
+        this.$router.push({
+          name: 'SupplierUpdate',
+          params: {
+            id: row.id
+          },
+          query: {
+            type: 'edit'
+          }
+        })
       }
     },
     addSupplier() {

src/views/myTrade/purchaseBill/purchaseOrder/components/Transport.vue

@@ -23,8 +23,11 @@
       <el-form-item label="送达日期" prop="arriveTime" :rules="[{ required: true, message: `请选择送达日期`, trigger: 'change' }]">
         <el-date-picker v-model="ruleForm.arriveTime" value-format="yyyy-MM-dd" type="date" placeholder="选择送达日期" style="width: 100%;" />
       </el-form-item>
-      <el-form-item label="运输证明" prop="transportCertificateFileId">
-        <span slot="label" class="required-label">运输证明</span>
+      <el-form-item label="运输发票号码" prop="transportInvoiceNumber" :rules="[{ required: true, message: `请输入运输发票号码`, trigger: 'blur' }]">
+        <el-input v-model="ruleForm.transportInvoiceNumber" placeholder="请输入" />
+      </el-form-item>
+      <el-form-item label="运输发票" prop="transportCertificateFileId">
+        <span slot="label" class="required-label">运输发票</span>
         <cy-upload
           ref="transportCertificateFileId"
           :upload-params="{
@@ -33,11 +36,14 @@
           :file-data="ruleForm.transportCertificateFileId"
           :upload-from-orange-status="true"
           :file-type="'pdf,PDF,png,PNG,jpg,JPG,bmp,BMP,jpeg,JPEG'"
-          placeholder="请上传运输证明"
+          placeholder="请上传运输发票"
           :limit="1"
           :file-size="20"
         />
       </el-form-item>
+      <el-form-item label="开票日期" prop="kprq" :rules="[{ required: true, message: `请选择开票日期`, trigger: 'change' }]">
+        <el-date-picker v-model="ruleForm.kprq" value-format="yyyy-MM-dd" type="date" placeholder="选择开票日期" style="width: 100%;" />
+      </el-form-item>
       <el-form-item label="备注（选填）" prop="remark">
         <el-input v-model="ruleForm.remark" placeholder="请输入" />
       </el-form-item>
@@ -61,7 +67,9 @@ export default {
         companyName: '',
         deliveryTime: '',
         arriveTime: '',
+        transportInvoiceNumber: '',
         transportCertificateFileId: [],
+        kprq: '',
         remark: ''
       },
       rules: {}

src/views/myTrade/salesBill/declarationForm/index.vue

@@ -0,0 +1,270 @@
+<template>
+  <div class="purchase-order">
+    <div class="search">
+      <div class="left" />
+      <div class="right">
+        <div style="width: 280px;">
+          <el-input v-model="search.orderNo" placeholder="报关单号 / 销售订单ID / 提运单号 / 出口发票号码" />
+        </div>
+        <div>
+          <el-select v-model="search.importerId" placeholder="请选择进口商" clearable>
+            <el-option
+              v-for="item in entryComList"
+              :key="item.id"
+              :label="item.entityName"
+              :value="item.id"
+            />
+          </el-select>
+        </div>
+        <div>
+          <el-select v-model="search.tradeTerms" placeholder="请选择贸易术语" clearable>
+            <el-option
+              v-for="item in constant.trade_terms"
+              :key="item.dictCode"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            />
+          </el-select>
+        </div>
+        <div>
+          <el-select v-model="search.status" placeholder="请选择报关结关状态" clearable>
+            <el-option
+              v-for="item in constant.declaration_status"
+              :key="item.dictCode"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            />
+          </el-select>
+        </div>
+        <div style="max-width: 350px;">
+          <el-date-picker
+            v-model="applyDate"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="申报日期范围"
+            end-placeholder="申报日期范围"
+            value-format="yyyy-MM-dd"
+          />
+        </div>
+        <div>
+          <el-date-picker
+            v-model="outDate"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="出口日期范围"
+            end-placeholder="出口日期范围"
+            value-format="yyyy-MM-dd"
+          />
+        </div>
+        <div class="right-btn">
+          <el-button type="primary" @click="fetchData('reset')">重置</el-button>
+          <el-button type="primary" @click="fetchData('search')">查询</el-button>
+        </div>
+      </div>
+    </div>
+    <cy-comm-table
+      ref="commTable"
+      v-loading="loading"
+      :columns="columns"
+      :data="tableData"
+      :count="count"
+      parent-component="DeclarationForm"
+    />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { declarationFormList, entryEntityList } from '@/api/myTrade/salesBill'
+import { codeChangeName } from '@/utils'
+import store from '@/store'
+export default {
+  name: 'DeclarationForm',
+  data() {
+    return {
+      count: 0,
+      search: {
+        status: '',
+        tradeTerms: '',
+        importerId: '',
+        orderNo: ''
+      },
+      page: 1,
+      size: 10,
+      applyDate: [],
+      outDate: [],
+      tableData: [],
+      columns: [
+        {
+          label: '序号',
+          index: true
+        },
+        {
+          label: '报关单号',
+          prop: 'bgdhgbh',
+          showTooltip: true
+        },
+        {
+          label: '销售订单ID',
+          prop: 'orderNo',
+          showTooltip: true
+        },
+        {
+          label: '进口商名称',
+          prop: 'importerName',
+          showTooltip: true
+        },
+        {
+          label: '贸易术语',
+          prop: 'invoiceCode',
+          showTooltip: true,
+          render: (h, row) => {
+            return <div> <el-tooltip class='item' effect='dark' content={codeChangeName(this.constant.trade_terms, row.tradeTerms, 'dictValue', 'dictLabel')} placement='top'>
+              <div class='one-ellipsis'>
+                {codeChangeName(this.constant.trade_terms, row.tradeTerms, 'dictValue', 'dictLabel')}
+              </div>
+            </el-tooltip></div>
+          }
+        },
+        {
+          label: '出口发票号码',
+          prop: 'invoiceNo',
+          showTooltip: true
+        },
+        {
+          label: '提运单号',
+          prop: 'ladingBillNo',
+          showTooltip: true
+        },
+        {
+          label: '报关结关状态',
+          prop: 'invoiceCode',
+          showTooltip: true,
+          render: (h, row) => {
+            return <div> <el-tooltip class='item' effect='dark' content={codeChangeName(this.constant.declaration_status, row.status, 'dictValue', 'dictLabel')} placement='top'>
+              <div class='one-ellipsis'>
+                {codeChangeName(this.constant.declaration_status, row.status, 'dictValue', 'dictLabel')}
+              </div>
+            </el-tooltip></div>
+          }
+        },
+        {
+          label: '申报日期',
+          prop: 'hgckhwbgdsbr',
+          showTooltip: true
+        },
+        {
+          label: '出口日期',
+          prop: 'ckrq1',
+          showTooltip: true
+        },
+        {
+          label: '操作',
+          render: (h, row) => {
+            const btnList = [
+              {
+                msg: '详情',
+                icon: 'iconfont icon-a-Group957',
+                category: 'see'
+              }
+            ]
+            const options = btnList.map(item => {
+              return (
+                this.tablePower({ item, row }) && <el-tooltip class='item' effect='dark' content={item.msg} placement='top'>
+                  <span class='table-icon-box'>
+                    <i class={item.icon} onClick={() => { this.handlerOperate(item.category, row) }}></i>
+                  </span>
+                </el-tooltip>
+              )
+            })
+            return <div>{ options }</div>
+          },
+          width: 120
+        }
+      ],
+      loading: false,
+      entryComList: []
+    }
+  },
+  computed: {
+    ...mapGetters(['constant']),
+    tablePower() {
+      return ({ item, row }) => {
+        const { rowPower } = item
+        if (rowPower) {
+          if (row[rowPower] !== null) {
+            return true
+          }
+          return false
+        } else {
+          return true
+        }
+      }
+    }
+  },
+  created() {
+    this.$store.dispatch('getConstant', ['trade_terms', 'declaration_status'])
+    const userId = store.getters.userInfo.id
+    entryEntityList({ userId: userId }).then(res => {
+      this.entryComList = res.data || []
+    })
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData(type) {
+      this.loading = true
+      if (type) {
+        this.page = 1
+        this.size = 10
+        if (type === 'reset') {
+          for (const key in this.search) {
+            this.search[key] = ''
+          }
+          this.applyDate = []
+          this.outDate = []
+        }
+      }
+      const params = {
+        ...this.search,
+        declareTimeStart: this.applyDate && this.applyDate.length ? this.applyDate[0] : '',
+        declareTimeEnd: this.applyDate && this.applyDate.length ? this.applyDate[1] : '',
+        exportTimeStart: this.outDate && this.outDate.length ? this.outDate[0] : '',
+        exportTimeEnd: this.outDate && this.outDate.length ? this.outDate[1] : '',
+        page: this.page || 1,
+        rows: this.size || 10
+      }
+      declarationFormList(params).then(({ data }) => {
+        this.loading = false
+        this.tableData = data.list || []
+        this.count = data.records
+      })
+    },
+    handlerOperate(type, row) {
+      if (type === 'see') {
+        this.$router.push({
+          name: 'DeclarationFormView',
+          query: {
+            type: 'view',
+            id: row.id
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+    .purchase-order {
+
+    }
+</style>
+<style lang="scss">
+    .purchase-order {
+        .icon-a-Group957, .icon-a-Group1087 {
+            font-size: 28px;
+        }
+    }
+</style>

src/views/myTrade/salesBill/declarationForm/view.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="sales-invoice-view">
+    <el-form
+      ref="ruleFormRef"
+      :model="ruleForm"
+      label-position="top"
+      label-width="150px"
+      class="rule-form-orange"
+    >
+      <cy-info-title>基础信息</cy-info-title>
+      <el-form-item label="报关单号">
+        <el-input :value="ruleForm.customsNo" :disabled="disabled" />
+      </el-form-item>
+      <el-form-item label="报关单">
+        <cy-upload
+          :file-data="ruleForm.customsFile ? [ruleForm.customsFile] : []"
+          :upload-from-orange-status="true"
+          :limit="1"
+          disabled
+        />
+      </el-form-item>
+      <el-form-item label="出口日期">
+        <el-input :value="ruleForm.ckrq1" :disabled="disabled" />
+      </el-form-item>
+      <el-form-item label="进口商名称">
+        <el-input :value="ruleForm.importerName" :disabled="disabled" />
+      </el-form-item>
+      <el-form-item label="销售订单ID">
+        <el-input :value="ruleForm.orderNo" :disabled="disabled" />
+      </el-form-item>
+      <el-form-item label="销售合同编号">
+        <el-input :value="ruleForm.contractNo" :disabled="disabled" />
+      </el-form-item>
+      <el-form-item label="贸易术语">
+        <el-input :value="ruleForm.tradeTerms ? codeToName(constant.trade_terms, ruleForm.tradeTerms, 'dictValue', 'dictLabel') : ''" :disabled="disabled" />
+      </el-form-item>
+      <el-form-item label="出口发票号码">
+        <el-input :value="ruleForm.invoiceNo" :disabled="disabled" />
+      </el-form-item>
+      <el-form-item label="提运单号">
+        <el-input :value="ruleForm.ladingBillNo" :disabled="disabled" />
+      </el-form-item>
+      <el-form-item label="海关关区（口岸）">
+        <el-input :value="ruleForm.hggq" :disabled="disabled" />
+      </el-form-item>
+      <el-form-item label="起运港">
+        <el-input :value="ruleForm.fromPort" :disabled="disabled" />
+      </el-form-item>
+      <el-form-item label="目的港">
+        <el-input :value="ruleForm.destPort" :disabled="disabled" />
+      </el-form-item>
+      <el-form-item :label="`运费金额 (${ruleForm.yfhghbzmDm})`">
+        <el-input :value="formatMoney(ruleForm.yfje)" :disabled="disabled" />
+      </el-form-item>
+      <el-form-item :label="`保费金额 (${ruleForm.bfhghbzmDm})`">
+        <el-input :value="formatMoney(ruleForm.bfje)" :disabled="disabled" />
+      </el-form-item>
+      <el-form-item :label="`杂费金额 (${ruleForm.zfhghbzmDm})`">
+        <el-input :value="formatMoney(ruleForm.zfje1)" :disabled="disabled" />
+      </el-form-item>
+      <el-form-item label="件数">
+        <el-input :value="ruleForm.js1" :disabled="disabled" />
+      </el-form-item>
+      <el-form-item label="毛重（千克）">
+        <el-input :value="ruleForm.mz2" :disabled="disabled" />
+      </el-form-item>
+      <el-form-item label="净重（千克）">
+        <el-input :value="ruleForm.jz" :disabled="disabled" />
+      </el-form-item>
+      <el-form-item label="申报日期">
+        <el-input :value="ruleForm.hgckhwbgdsbrq" :disabled="disabled" />
+      </el-form-item>
+      <el-form-item label="申报单位名称">
+        <el-input :value="ruleForm.sbdwmc" :disabled="disabled" />
+      </el-form-item>
+      <el-form-item label="委托报关协议编号">
+        <el-input :value="ruleForm.entrustNo" :disabled="disabled" />
+      </el-form-item>
+      <el-form-item label="委托报关协议">
+        <cy-upload
+          :file-data="ruleForm.entrustFile ? [ruleForm.entrustFile] : []"
+          :upload-from-orange-status="true"
+          :limit="1"
+          disabled
+        />
+      </el-form-item>
+      <el-form-item label="集装箱号">
+        <el-input :value="ruleForm.jzxh" :disabled="disabled" />
+      </el-form-item>
+      <cy-info-title style="margin-top: 20px;">商品信息</cy-info-title>
+      <div style="width: 100%;" class="table-box">
+        <el-table :data="goodsInfo" style="width: 100%;">
+          <el-table-column label="序号" type="index" width="50" />
+          <el-table-column label="HS编码" prop="hsCode" :show-overflow-tooltip="true" />
+          <el-table-column label="海关商品名称" prop="hgspmc" :show-overflow-tooltip="true" />
+          <el-table-column label="规格型号" prop="ggxh" :show-overflow-tooltip="true" />
+          <el-table-column label="法定计量单位" prop="fdjldw" :show-overflow-tooltip="true" />
+          <el-table-column label="法定单位数量" prop="cksl" :show-overflow-tooltip="true" />
+          <el-table-column label="申报计量单位" prop="unit" :show-overflow-tooltip="true" />
+          <el-table-column label="数量" prop="count" :show-overflow-tooltip="true" />
+          <el-table-column label="币制" prop="paymentCurrency" :show-overflow-tooltip="true" />
+          <el-table-column prop="price" label="销售单价" width="180" :show-overflow-tooltip="true">
+            <template slot-scope="{ row }">
+              <span>{{ formatMoney(row.price) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="priceTotal" label="商品金额" width="150" :show-overflow-tooltip="true">
+            <template slot-scope="{ row }">
+              <span>{{ formatMoney(row.priceTotal) }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-form>
+    <div class="submit-btn">
+      <el-button @click="() => { $router.push({name: 'SalesBill'}) }">返回</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { codeChangeName, handleMoney } from '@/utils'
+import { declarationFormDetail } from '@/api/myTrade/salesBill'
+export default {
+  name: 'SalesInvoiceView',
+  data() {
+    return {
+      goodsInfo: [],
+      ruleForm: {},
+      disabled: true
+    }
+  },
+  computed: {
+    ...mapGetters(['constant']),
+    formatMoney(val) {
+      return (val) => {
+        return handleMoney(val)
+      }
+    }
+  },
+
+  created() {
+    this.$store.dispatch('getConstant', ['trade_terms'])
+    this.getDetails()
+  },
+  methods: {
+    getDetails() {
+      declarationFormDetail({ id: this.$route.query.id }).then(({ data }) => {
+        this.ruleForm = data || {}
+        this.goodsInfo = data.invoiceCommodityList || []
+      })
+    },
+    codeToName(list, type, code, name) {
+      return codeChangeName(list, type, code, name)
+    }
+  }
+}
+</script>
+
+  <style lang="scss" scoped>
+    .sales-invoice-view {
+      padding: 10px 20px;
+    }
+  </style>

src/views/myTrade/salesBill/main.vue

@@ -39,12 +39,14 @@
       <el-tab-pane label="销售订单" :name="'SalesOrder'" />
       <el-tab-pane label="销售发票" :name="'SalesInvoice'" />
       <el-tab-pane label="物流运输" :name="'SalesTransport'" />
+      <el-tab-pane label="报关单" :name="'DeclarationForm'" />
     </el-tabs>
 
     <transition name="fade-transform" mode="out-in">
       <salesOrder v-if="type === 'SalesOrder'" />
       <salesInvoice v-if="type === 'SalesInvoice'" />
       <salesTransport v-if="type === 'SalesTransport'" />
+      <declarationForm v-if="type === 'DeclarationForm'" />
     </transition>
 
   </div>
@@ -55,7 +57,8 @@ export default {
   components: {
     SalesOrder: () => import('./salesOrder/index'),
     SalesInvoice: () => import('./salesInvoices/index'),
-    SalesTransport: () => import('./salesTransport/index')
+    SalesTransport: () => import('./salesTransport/index'),
+    DeclarationForm: () => import('./declarationForm/index')
   },
   data() {
     return {