ToDo 合同详情

src/views/orderManage/orderDetail.vue

@@ -1,14 +1,230 @@
 <template>
-  <div class="full-container-p24"></div>
+  <div class="full-container-p24">
+    <el-form
+      ref="ruleFormRef"
+      :model="ruleForm"
+      :rules="rules"
+      label-width="100px"
+    >
+      <div class="container-title">上传签船合同</div>
+
+      <el-form-item label="" prop="contractViewUrl">
+        <Uploader
+          :params="{ type: 8 }"
+          :disabled="disabled"
+          @onSendFileList="contractFileListChange"
+          :fileList="contractFileList"
+        ></Uploader>
+      </el-form-item>
+      <div class="container-title">合同信息</div>
+
+      <el-form-item label="选择货主" prop="cargoOwnerName">
+        <RemoteSelect
+          class="w240"
+          api="getCargoOwnerSelect"
+          v-model="ruleForm.cargoOwnerName"
+          placeholder="请选择"
+          @selectItem="selectCargoOwner($event)"
+        ></RemoteSelect>
+      </el-form-item>
+      <el-form-item label="选择货种" prop="cargo">
+        <RemoteSelect
+          api="getCargoSelect"
+          v-model="ruleForm.cargo"
+          :params="{
+            cargoOwnerId: ruleForm.cargoOwnerId,
+          }"
+          :placeholder="ruleForm.cargoOwnerId ? '请选择' : '请先选择货主'"
+          @selectItem="selectCargo"
+          class="w240"
+          :disabled="!ruleForm.cargoOwnerId"
+        ></RemoteSelect>
+      </el-form-item>
+      <el-form-item label="吨位" prop="tons">
+        <el-input class="w240" v-model="ruleForm.tons"></el-input>
+      </el-form-item>
+      <el-form-item label="始发港" prop="">
+        <RemoteSelect
+          class="w240"
+          api="getCol"
+          v-model="ruleForm.loadPort"
+          placeholder="选择始发港"
+          @selectItem="selectLoadPort($event)"
+        ></RemoteSelect>
+      </el-form-item>
+      <el-form-item label="目的港" prop="">
+        <div
+          class="mb10"
+          v-for="(item, index) in ruleForm.dischargePorts"
+          :key="item"
+        >
+          <RemoteSelect
+            class="mr10 w240"
+            api="getCol"
+            v-model="ruleForm.dischargePorts[index].dischargePort"
+            placeholder="选择目的港"
+            @selectItem="selectDischargePort($event, index)"
+          ></RemoteSelect>
+          <el-button
+            v-if="ruleForm.dischargePorts.length > 1"
+            style="padding: 0 8px"
+            type="danger"
+            size="mini"
+            @click="removeDischargePort(index)"
+          >
+            删除
+          </el-button>
+        </div>
+        <el-button
+          type="primary"
+          size="mini"
+          @click="ruleForm.dischargePorts.push({})"
+        >
+          添加提前卸货港
+        </el-button>
+      </el-form-item>
+      <el-form-item label="预计到港时间" prop="arrivalLoadPortEtaTime">
+        <el-date-picker
+          style="width: 240px"
+          v-model="ruleForm.arrivalLoadPortEtaTime"
+          type="date"
+          value-format="YYYY/MM/DD"
+          placeholder="预计到港时间"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item><el-button @click="onSubmit">确定</el-button></el-form-item>
+    </el-form>
+  </div>
 </template>
 
 <script setup>
 import api from "../../apis/fetch";
 import { ref, onMounted, reactive } from "vue";
-import { ElNotification, ElMessageBox } from "element-plus";
+import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
 import router from "../../router";
 import store from "../../store";
 import { subTimeStr } from "../../utils/utils";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+async function getOrderDetail() {
+  let { data } = await api.getOrderDetail({
+    orderId: route.query.id,
+  });
+  console.log(data);
+}
+
+const ruleFormRef = ref(null);
+const ruleForm = ref({
+  dischargePorts: [{}],
+});
+const rules = ref({
+  orderId: [
+    { required: true, message: "请输入订单号", trigger: "blur" },
+    { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+  ],
+});
+const disabled = ref(false);
+function contractFileListChange(fileList) {
+  console.log(fileList);
+}
+const contractFileList = ref([
+  {
+    name: "wx.jpg",
+    percentage: 100,
+    status: "success",
+    size: 83292,
+    raw: {
+      uid: 1711264262609,
+    },
+    uid: 1711264262609,
+    url: "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/order/contract/d4bace44-f0c2-4d5f-83c4-4e76e0ab38631711264262785.jpg?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKID4xb091cy4tRikV0EBrGOGsCF1WkhMlum%26q-sign-time%3D1711264262%3B93158697600%26q-key-time%3D1711264262%3B93158697600%26q-header-list%3Dhost%26q-url-param-list%3D%26q-signature%3D22bd6e31c0f67d4c03c67ebdb243abd82487afa6",
+    response: {
+      result: {
+        fileName: "wx.jpg",
+        uploadStatus: "success",
+        key: "order/contract/d4bace44-f0c2-4d5f-83c4-4e76e0ab38631711264262785.jpg",
+        viewUrl:
+          "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/order/contract/d4bace44-f0c2-4d5f-83c4-4e76e0ab38631711264262785.jpg?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKID4xb091cy4tRikV0EBrGOGsCF1WkhMlum%26q-sign-time%3D1711264262%3B93158697600%26q-key-time%3D1711264262%3B93158697600%26q-header-list%3Dhost%26q-url-param-list%3D%26q-signature%3D22bd6e31c0f67d4c03c67ebdb243abd82487afa6",
+        downloadUrl:
+          "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/order/contract/d4bace44-f0c2-4d5f-83c4-4e76e0ab38631711264262785.jpg?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKID4xb091cy4tRikV0EBrGOGsCF1WkhMlum%26q-sign-time%3D1711264262%3B93156019200%26q-key-time%3D1711264262%3B93156019200%26q-header-list%3Dhost%26q-url-param-list%3Dresponse-cache-control%3Bresponse-content-disposition%3Bresponse-content-language%3Bresponse-content-type%3Bresponse-expires%26q-signature%3Dd9b2397064045e3f1d5ce30ca40bbb046494ffcc&response-cache-control=no-cache&response-content-disposition=filename%3D%22wx.jpg%22&response-content-language=zh-CN&response-expires=Mon%2C%2025%20Mar%202024%2007%3A11%3A02%20GMT&response-content-type=application%2Foctet-stream",
+        type: 8,
+      },
+      status: 0,
+      msg: "上传成功",
+    },
+  },
+  {
+    name: "xxb.jpg",
+    percentage: 100,
+    status: "success",
+    size: 64375,
+    raw: {
+      uid: 1711264272486,
+    },
+    uid: 1711264272486,
+    url: "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/order/contract/93ff96c3-c6db-4baa-83ba-74eed2bd3ae61711264272643.jpg?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKID4xb091cy4tRikV0EBrGOGsCF1WkhMlum%26q-sign-time%3D1711264272%3B93158697600%26q-key-time%3D1711264272%3B93158697600%26q-header-list%3Dhost%26q-url-param-list%3D%26q-signature%3D06c4eb07a3c11a5974cf9373bcd7b75463a93f51",
+    response: {
+      result: {
+        fileName: "xxb.jpg",
+        uploadStatus: "success",
+        key: "order/contract/93ff96c3-c6db-4baa-83ba-74eed2bd3ae61711264272643.jpg",
+        viewUrl:
+          "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/order/contract/93ff96c3-c6db-4baa-83ba-74eed2bd3ae61711264272643.jpg?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKID4xb091cy4tRikV0EBrGOGsCF1WkhMlum%26q-sign-time%3D1711264272%3B93158697600%26q-key-time%3D1711264272%3B93158697600%26q-header-list%3Dhost%26q-url-param-list%3D%26q-signature%3D06c4eb07a3c11a5974cf9373bcd7b75463a93f51",
+        downloadUrl:
+          "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/order/contract/93ff96c3-c6db-4baa-83ba-74eed2bd3ae61711264272643.jpg?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKID4xb091cy4tRikV0EBrGOGsCF1WkhMlum%26q-sign-time%3D1711264272%3B93156019200%26q-key-time%3D1711264272%3B93156019200%26q-header-list%3Dhost%26q-url-param-list%3Dresponse-cache-control%3Bresponse-content-disposition%3Bresponse-content-language%3Bresponse-content-type%3Bresponse-expires%26q-signature%3D3e65457866396f4673e911b280a38407648d0ca2&response-cache-control=no-cache&response-content-disposition=filename%3D%22xxb.jpg%22&response-content-language=zh-CN&response-expires=Mon%2C%2025%20Mar%202024%2007%3A11%3A12%20GMT&response-content-type=application%2Foctet-stream",
+        type: 8,
+      },
+      status: 0,
+      msg: "上传成功",
+    },
+  },
+]);
+function selectCargoOwner({ value, key }) {
+  ruleForm.value.cargoOwnerId = key;
+  ruleForm.value.cargoOwnerName = value;
+}
+function selectCargo({ value, key }) {
+  ruleForm.value.cargoId = key;
+  ruleForm.value.cargo = value;
+}
+
+function selectLoadPort(item) {}
+function selectDischargePort(item, index) {}
+function removeDischargePort(index) {
+  ruleForm.value.dischargePorts.splice(index, 1);
+}
+
+function onSubmit() {
+  ruleFormRef.value.validate((valid) => {
+    console.log(ruleForm.value);
+    return;
+    if (valid) {
+      ElMessageBox.confirm("是否确认提交", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          ElNotification({
+            title: "成功",
+            message: "提交成功",
+            type: "success",
+          });
+        })
+        .catch(() => {
+          ElNotification();
+        });
+    }
+  });
+}
+onMounted(() => {
+  getOrderDetail();
+});
 </script>
 
-<style scoped></style>
+<style scoped>
+.w240 {
+  width: 240px;
+}
+</style>