委托书静态页

src/views/salesMange/shipmentMange/document/index.vue

@@ -2163,20 +2163,319 @@
       v-model="mandateDialog"
       width="1000"
     >
-      <div id="mandate">
+      <div>
+        <el-button type="primary" @click="textShowOne = !textShowOne"
+          ><span v-show="!textShowOne">切换只读状态</span>
+          <span v-show="textShowOne">切换编辑状态</span></el-button
+        >
+      </div>
+      <div id="mandate" style="padding: 30px">
         <div class="title">代 理 报 关 委 托 书</div>
         <div style="text-align: right">
           <span>编号：</span>
-          <div v-if="textShowOne"></div>
+          <span v-if="textShowOne">{{ mandateData.a }}</span>
+          <el-input
+            style="width: 200px"
+            autosize
+            type="textarea"
+            v-if="!textShowOne"
+            v-model="mandateData.a"
+            size="small"
+          />
+        </div>
+        <div>
+          <span v-if="textShowOne">{{ mandateData.b }}</span>
           <el-input
             style="width: 200px"
             autosize
             type="textarea"
             v-if="!textShowOne"
-            v-model="mandateData.exwPrice"
+            v-model="mandateData.b"
             size="small"
           />
+          <span v-if="textShowOne">：</span>
         </div>
+        <div>
+          <span style="padding-left: 2em">我单位现</span>
+          <span v-if="textShowOne">{{ mandateData.c ? "长期" : "逐票" }}</span>
+          <span class="select_height">
+            <el-select
+              v-model="mandateData.c"
+              class="m-2"
+              placeholder=""
+              v-if="!textShowOne"
+            >
+              <el-option label="逐票" value="0" />
+              <el-option label="长期" value="1" />
+            </el-select>
+          </span>
+          委托贵公司代理
+          <span v-if="textShowOne">
+            〔<span v-for="(item, index) in mandateData.arr" :key="index">
+              {{ showLabelData(item) }}
+              <span v-if="index < mandateData.arr.length - 1">，</span>
+            </span>
+            〕
+          </span>
+          <el-select
+            v-model="mandateData.arr"
+            multiple
+            placeholder=""
+            style="width: 240px"
+            v-if="!textShowOne"
+          >
+            <el-option
+              v-for="item in selectData"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+          等通关事宜。详见《委托报关协议》
+        </div>
+        <div style="text-indent: 2em">
+          我单位保证遵守海关有关法律、法规、规章，保证所提供的情况真实、完整、单货相符，无侵犯他
+          人知识产权的行为。否则，愿承担相关法律责任。
+        </div>
+        <div style="text-indent: 2em">
+          本委托书有效期自签字之日起至<span v-if="textShowOne">{{
+            getChineseDate(mandateData.d)
+          }}</span
+          ><el-date-picker
+            v-model="mandateData.d"
+            type="date"
+            placeholder=""
+            size="default"
+            v-if="!textShowOne"
+          />止。
+        </div>
+        <div style="text-align: right; padding-right: 150px">
+          委托方（盖章）
+        </div>
+        <div style="margin: 20px 0; text-align: right; padding-right: 100px">
+          法定代表人或其授权签署《代理报关委托书》的人（签字）
+        </div>
+        <div style="text-align: right">
+          <span v-if="textShowOne">{{ getChineseDate(mandateData.e) }}</span>
+          <el-date-picker
+            v-model="mandateData.e"
+            type="date"
+            placeholder=""
+            size="default"
+            v-if="!textShowOne"
+          />
+        </div>
+        <div class="title" style="margin-bottom: 10px">委 托 报 关 协 议</div>
+        <div style="text-indent: 2em">
+          为明确委托报关具体事项和各自责任，双方经平等协商签定协议如下：
+        </div>
+        <div style="width: 100%; overflow: hidden">
+          <div style="width: 49%; float: left">
+            <table border="1" style="width: 100%" class="table-mandate">
+              <tr>
+                <td style="width: 33%">委托方</td>
+                <td style="width: 67%">
+                  <span v-if="textShowOne">{{
+                    dictValueLabel(mandateData.f, companyData)
+                  }}</span>
+                  <span class="select_height">
+                    <el-select
+                      v-model="mandateData.f"
+                      class="m-2"
+                      placeholder=""
+                      v-if="!textShowOne"
+                      style="height: 26px"
+                    >
+                      <el-option
+                        v-for="item in companyData"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      /> </el-select
+                  ></span>
+                </td>
+              </tr>
+              <tr>
+                <td>主要货物名称</td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>HS 编码</td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>进/出口日期</td>
+                <td>
+                  <span v-if="textShowOne">{{
+                    getChineseDate(mandateData.g)
+                  }}</span>
+                  <el-date-picker
+                    v-model="mandateData.g"
+                    type="date"
+                    placeholder=""
+                    size="default"
+                    v-if="!textShowOne"
+                    style="height: 26px"
+                  />
+                </td>
+              </tr>
+              <tr>
+                <td>提运单号</td>
+                <td>
+                  <span v-if="textShowOne">{{ mandateData.h }}</span>
+                  <el-input
+                    autosize
+                    type="textarea"
+                    v-if="!textShowOne"
+                    v-model="mandateData.h"
+                    size="small"
+                  />
+                </td>
+              </tr>
+              <tr>
+                <td>贸易方式</td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>数（重）量</td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>包装情况</td>
+                <td>
+                  <span v-if="textShowOne">{{ mandateData.j }}</span>
+                  <el-input
+                    autosize
+                    type="textarea"
+                    v-if="!textShowOne"
+                    v-model="mandateData.j"
+                    size="small"
+                  />
+                </td>
+              </tr>
+              <tr>
+                <td>原产地/货源地</td>
+                <td></td>
+              </tr>
+              <tr>
+                <td></td>
+                <td></td>
+              </tr>
+              <tr>
+                <td colspan="2" style="text-align: left; height: auto">
+                  <span> 其他要求：</span>
+                  <span v-if="textShowOne">{{ mandateData.k }}</span>
+                  <el-input
+                    autosize
+                    type="textarea"
+                    v-if="!textShowOne"
+                    v-model="mandateData.k"
+                    size="small"
+                    :rows="3"
+                    style="width: 82%"
+                  />
+                </td>
+              </tr>
+              <tr>
+                <td colspan="2" style="text-align: left; height: auto">
+                  背面所列通用条款是本协议不可分割的一部分，对本协
+                  议的签署构成了对背面通用条款的同意。
+                </td>
+              </tr>
+              <tr>
+                <td colspan="2" style="text-align: left">
+                  <div style="display: flex">
+                    <div>委托方签章：</div>
+                    <div style="height: 200px"></div>
+                  </div>
+                  <div style="text-align: left">经办人签字：</div>
+                  <div style="display: flex; justify-content: space-between">
+                    <div>联系电话：</div>
+                    <div>年 月 日</div>
+                  </div>
+                </td>
+              </tr>
+            </table>
+          </div>
+          <div style="width: 2%; float: left; opacity: 0">1</div>
+          <div style="width: 49%; float: left">
+            <table border="1" style="width: 100%" class="table-mandate">
+              <tr>
+                <td style="width: 33%">被委托方</td>
+                <td colspan="2">
+                  <span v-if="textShowOne"></span>
+                </td>
+              </tr>
+              <tr>
+                <td>*报关单编码</td>
+                <td colspan="2" style="text-align: left">No.</td>
+              </tr>
+              <tr>
+                <td rowspan="4">收到单证日期</td>
+                <td style="width: 33%">合同</td>
+                <td style="width: 34%">发票</td>
+              </tr>
+              <tr>
+                <td>装箱清单</td>
+                <td>提（运）单</td>
+              </tr>
+              <tr>
+                <td>加工贸易手册</td>
+                <td>许可证件</td>
+              </tr>
+              <tr>
+                <td
+                  colspan="2"
+                  style="text-align: left; height: 144px; vertical-align: top"
+                >
+                  其他
+                  <!-- <el-input
+                    autosize
+                    type="textarea"
+                    v-if="!textShowOne"
+                    v-model="mandateData.exwPrice"
+                    size="small"
+                    :rows="3"
+                    style="width: 67%"
+                  /> -->
+                </td>
+              </tr>
+              <tr>
+                <td>报关收费</td>
+                <td colspan="2" style="text-align: left">
+                  人民币：<span style="float: right; padding-right: 20px"
+                    >元</span
+                  >
+                </td>
+              </tr>
+              <tr>
+                <td colspan="3" style="text-align: left; height: auto">
+                  承诺说明： <span v-if="textShowOne"></span>
+                </td>
+              </tr>
+              <tr>
+                <td colspan="3" style="text-align: left; height: auto">
+                  背面所列通用条款是本协议不可分割的一部分，对本协
+                  议的签署构成了对背面通用条款的同意。
+                </td>
+              </tr>
+              <tr>
+                <td colspan="3" style="text-align: left">
+                  <div style="display: flex">
+                    <div>被委托方签章：</div>
+                    <div style="height: 200px"></div>
+                  </div>
+                  <div style="text-align: left">报关人员签名：</div>
+                  <div style="display: flex; justify-content: space-between">
+                    <div>联系电话：</div>
+                    <div>年 月 日</div>
+                  </div>
+                </td>
+              </tr>
+            </table>
+          </div>
+        </div>
+        <div style="text-align: right">中国报关协会监制</div>
       </div>
     </el-dialog>
   </div>
@@ -2298,6 +2597,7 @@ const config = computed(() => {
     },
   ];
 });
+const companyData = ref([]);
 const getDict = () => {
   proxy.post("/customizeArea/list", { parentId: "0" }).then((res) => {
     if (res && res.length > 0) {
@@ -2310,6 +2610,15 @@ const getDict = () => {
     }
   });
   proxy
+    .post("/corporation/page", { pageNum: 1, pageSize: 9999 })
+    .then((res) => {
+      companyData.value = res.rows.map((x) => ({
+        ...x,
+        label: x.name,
+        value: x.id,
+      }));
+    });
+  proxy
     .post("/dictTenantData/page", {
       pageNum: 1,
       pageSize: 999,
@@ -2717,7 +3026,77 @@ const printCustomsDeclaration = ref({
 const textShow = ref(false);
 const textShowOne = ref(false);
 const mandateDialog = ref(false);
-const mandateData = ref({});
+const mandateData = ref({
+  arr: [],
+});
+const selectData = ref([
+  {
+    label: "A",
+    value: "0",
+  },
+  {
+    label: "B",
+    value: "1",
+  },
+  {
+    label: "C",
+    value: "2",
+  },
+  {
+    label: "D",
+    value: "3",
+  },
+  {
+    label: "E",
+    value: "4",
+  },
+  {
+    label: "F",
+    value: "5",
+  },
+  {
+    label: "G",
+    value: "6",
+  },
+  {
+    label: "H",
+    value: "7",
+  },
+]);
+const selectDataOne = ref([
+  {
+    label: "填单申报",
+    value: "0",
+  },
+  {
+    label: "申请、联系和配合实施检验检疫",
+    value: "1",
+  },
+  {
+    label: "辅助查验",
+    value: "2",
+  },
+  {
+    label: "代缴税款",
+    value: "3",
+  },
+  {
+    label: "设立手册（账册）",
+    value: "4",
+  },
+  {
+    label: "核销手册（账册）",
+    value: "5",
+  },
+  {
+    label: "领取海关相关单证",
+    value: "6",
+  },
+  {
+    label: "其他",
+    value: "7",
+  },
+]);
 const clickPrint = (status) => {
   // printDetails.value = {
   //   packDetailGoodsList: [],
@@ -2871,6 +3250,21 @@ const printObj = ref({
     "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
   extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
 });
+
+const getChineseDate = (date) => {
+  if (date) {
+    let year = date.getFullYear();
+    let month = date.getMonth() + 1;
+    let day = date.getDate();
+    return year + "年" + month + "月" + day + "日 ";
+  }
+};
+const showLabelData = (val) => {
+  const current = selectDataOne.value.find((x) => x.value === val);
+  if (current && current.label) {
+    return current.label;
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -2958,31 +3352,58 @@ const printObj = ref({
   box-shadow: 0 0 0 0px !important;
   --el-input-border: 0px;
 }
+// 委托单
 :deep(#mandate .el-textarea__inner) {
-  background: transparent !important;
+  // background: transparent !important;
+  min-height: 27px;
   overflow-y: hidden;
-  padding: 0 4px !important;
+  // padding: 0 4px !important;
   resize: none;
 }
+:deep(#mandate .el-input__wrapper) {
+  // box-shadow: 0 0 0 0px !important;
+  // --el-input-border: 0px;
+}
+:deep(#mandate .el-input__suffix-inner) {
+  // display: none;
+}
+:deep(#mandate .el-input__prefix-inner) {
+  // display: none;
+}
+:deep(#mandate .select_height .el-input__wrapper) {
+  // height: 26px;
+}
+
 :deep(#mandate .el-textarea) {
-  --el-input-focus-border: transparent;
-  --el-input-transparent-border: 0 0 0 0px;
-  --el-input-border-color: transparent;
-  --el-input-hover-border: 0px !important;
-  --el-input-hover-border-color: transparent;
-  --el-input-focus-border-color: transparent;
-  --el-input-clear-hover-color: transparent;
-  box-shadow: 0 0 0 0px !important;
-  --el-input-border: 0px;
+  // --el-input-focus-border: transparent;
+  // --el-input-transparent-border: 0 0 0 0px;
+  // --el-input-border-color: transparent;
+  // --el-input-hover-border: 0px !important;
+  // --el-input-hover-border-color: transparent;
+  // --el-input-focus-border-color: transparent;
+  // --el-input-clear-hover-color: transparent;
+  // box-shadow: 0 0 0 0px !important;
+  // --el-input-border: 0px;
+}
+:deep(#mandate .el-input__inner) {
+  // border: none;
+  // box-shadow: none;
+  // --el-input-border: none;
 }
 #mandate {
   .title {
-    font-size: 14px;
+    font-size: 20px;
     font-weight: 700;
     text-align: center;
   }
-  .flex-class {
-    display: flex;
+}
+.table-mandate {
+  border-collapse: collapse;
+  border-spacing: 0;
+  td {
+    text-align: center;
+    padding: 4px 8px;
+    height: 36px;
   }
 }
 </style>