Merge branch 'wuchan' of http://git.huihenduo.com.cn:3000/wzh/JiangYunPhotosCargoOwner_WebApp into lydf

src/App.vue

@@ -10,7 +10,7 @@
         <div class="main-section"><router-view></router-view></div>
       </div>
     </div>
-    <FooterVue></FooterVue>
+    <!-- <FooterVue></FooterVue> -->
   </div>
   <router-view v-else></router-view>
 </template>
@@ -48,7 +48,7 @@ export default {
 }
 .main-app {
   width: 100%;
-  height: calc(100% - 120px);
+  height: calc(100% - 60px);
   display: flex;
 }
 

src/apis/fetch.js

@@ -156,4 +156,29 @@ export default {
   getLongDaysInPort(data) {
     return $http("/voyage/cargo/longDaysInPort", data);
   },
+
+  // 获取客户列表
+  getClientList(data) {
+    return $http("/client/account/list", data);
+  },
+
+  // 添加客户
+  addClient(data) {
+    return $http("/client/account/add", data);
+  },
+
+  // 修改客户
+  updateClient(data) {
+    return $http("/client/account/update", data);
+  },
+
+  // 获取港口列表
+  getCol(data) {
+    return $http("/port/backstage/getCol", data);
+  },
+
+  // 获取货种下拉
+  getCargoSelect(data) {
+    return $http("/cargo/select", data);
+  },
 };

src/auth/menuData.js

@@ -45,6 +45,11 @@ let menuData = [
         name: "员工列表",
         code: "ACCOUNTLIST",
       },
+      {
+        path: "/accountManage/clientList",
+        name: "客户列表",
+        code: "CLIENTLIST",
+      },
     ],
   },
   {

src/router/index.js

@@ -90,6 +90,15 @@ const router = createRouter({
       },
       component: () => import("../views/cargoManage/cargoList.vue"),
     },
+    {
+      path: "/accountManage/clientList",
+      name: "clientList",
+      meta: {
+        title: "客户列表",
+        code: "CLIENTLIST",
+      },
+      component: () => import("../views/accountManage/clientList.vue"),
+    },
   ],
 });
 

src/views/accountManage/clientList.vue

@@ -0,0 +1,353 @@
+<template>
+  <div class="full-container-p24">
+    <div style="display: flex; justify-content: space-between">
+      <div style="display: flex">
+        <el-input
+          placeholder="请输入姓名/手机号"
+          prefix-icon="el-icon-search"
+          v-model="term"
+          clearable
+          style="height: 32px; width: 330px; line-height: 32px"
+          @keyup.enter.native="getClientList"
+        ></el-input>
+        <div class="seach-btn" @click="getClientList">查询</div>
+      </div>
+      <el-button v-auth="'CLIENTACCOUNT'" type="primary" @click="showAddModal"
+        >添加客户</el-button
+      >
+    </div>
+
+    <el-dialog
+      v-model="visable"
+      :title="accountId ? '修改客户' : '添加客户'"
+      width="550px"
+      @close="resetForm()"
+    >
+      <template v-slot:default>
+        <div class="df jcc">
+          <el-form
+            :model="ruleForm"
+            :rules="rules"
+            ref="form"
+            label-width="110px"
+            label-position="left"
+          >
+            <el-form-item prop="name" label="姓名">
+              <el-input style="width: 280px" v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item prop="phone" label="手机号">
+              <el-input
+                style="width: 280px"
+                v-model="ruleForm.phone"
+              ></el-input>
+            </el-form-item>
+
+            <el-form-item prop="sharePermission" label="查看分享">
+              <el-radio
+                v-model="ruleForm.sharePermission"
+                :label="1"
+                size="large"
+                >有权限</el-radio
+              >
+              <el-radio
+                v-model="ruleForm.sharePermission"
+                :label="0"
+                size="large"
+                >无权限</el-radio
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+      </template>
+      <template v-slot:footer>
+        <div class="dialog-footer">
+          <el-button @click="resetForm">取 消</el-button>
+          <el-button type="primary" @click="addClient(ruleForm)">
+            确 定
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <div style="margin-top: 24px">
+      <el-table :data="tableData" stripe style="width: 100%">
+        <el-table-column
+          type="index"
+          label="序号"
+          min-width="40"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="userName"
+          label="姓名"
+          min-width="80"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="phone"
+          label="手机号"
+          min-width="100"
+          align="center"
+        ></el-table-column>
+        <!-- <el-table-column
+          prop="accountStatus"
+          label="状态"
+          min-width="80"
+          align="center"
+        >
+          <template v-slot="scope">
+            <el-switch
+              v-model="scope.row.accountStatus"
+              active-color="#13ce66"
+              inactive-color="#ff4949"
+              active-text="启用"
+              inactive-text="禁用"
+              :active-value="1"
+              :inactive-value="0"
+            /> </template
+        ></el-table-column> -->
+        <el-table-column
+          prop="sharePermission"
+          label="分享权限"
+          min-width="80"
+          align="center"
+        >
+          <template v-slot="scope">
+            <el-switch
+              v-model="scope.row.sharePermission"
+              active-color="#13ce66"
+              inactive-color="#ff4949"
+              active-text="启用"
+              inactive-text="禁用"
+              :active-value="1"
+              :inactive-value="0"
+              @change="changeSharePermission($event, scope.row)"
+            /> </template
+        ></el-table-column>
+
+        <el-table-column
+          v-auth="'ADDACCOUNT'"
+          label="操作"
+          min-width="120"
+          align="center"
+        >
+          <template v-slot="scope">
+            <div class="df aic jcsa">
+              <!-- <el-switch
+                v-model="scope.row.accountStatus"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                active-text="启用"
+                inactive-text="禁用"
+                :active-value="1"
+                :inactive-value="0"
+              />
+
+              <div
+                style="
+                  color: red;
+                  margin-left: 10px;
+                  font-size: 14px;
+                  text-decoration: underline;
+                  cursor: pointer;
+                "
+              >
+                删除
+              </div> -->
+              <el-button
+                @click="showUpdateModal(scope.row, 1)"
+                size="small"
+                type="primary"
+                >修改客户权限</el-button
+              >
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div style="width: 100%; text-align: right; margin-top: 43px">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="total"
+          @current-change="pageChange"
+        ></el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import api from "../../apis/fetch";
+import { ref, onMounted, reactive } from "vue";
+import { ElNotification, ElMessageBox } from "element-plus";
+import store from "../../store/index";
+
+let tableData = ref([]);
+let currentPage = ref(1);
+let total = ref(0);
+let term = ref("");
+let loginAccountId = ref(0);
+let accountId = ref("");
+let ruleForm = ref({
+  name: "",
+  phone: "",
+  roleId: "",
+  deptId: "",
+});
+const rules = reactive({
+  name: [
+    {
+      required: true,
+      message: "请填写姓名",
+      trigger: "blur",
+    },
+  ],
+  phone: [
+    {
+      required: true,
+      message: "请填写手机号",
+      trigger: "blur",
+    },
+  ],
+  sharePermission: [
+    {
+      required: true,
+      message: "请选择权限",
+      trigger: "blur",
+    },
+  ],
+});
+
+function showAddModal() {
+  visable.value = true;
+  ruleForm.value = {
+    name: "",
+    phone: "",
+    sharePermission: "",
+  };
+}
+
+async function getClientList() {
+  let res = await api.getClientList({
+    term: term.value,
+    currentPage: currentPage.value,
+    size: 10,
+    loginAccountId: loginAccountId.value,
+  });
+  if (res.data.status == 0) {
+    tableData.value = res.data.result;
+    total.value = res.data.total;
+  } else {
+    tableData.value = [];
+    total.value = 0;
+  }
+}
+
+function pageChange(e) {
+  currentPage.value = e;
+  getClientList();
+}
+let visable = ref(false);
+let form = ref(null);
+async function addClient() {
+  form.value.validate(async (valid) => {
+    if (valid) {
+      let postData = {
+        ...ruleForm.value,
+        loginAccountId: loginAccountId.value,
+      };
+      if (accountId.value) {
+        postData.accountId = accountId.value;
+      }
+      let res = await api[accountId.value ? "updateClient" : "addClient"](
+        postData
+      );
+      if (res.data.status == 0) {
+        ElNotification({
+          title: "成功",
+          duration: 1500,
+          message: res.data.msg,
+          type: "success",
+        });
+        resetForm();
+        getClientList();
+      } else {
+        ElNotification({
+          title: "失败",
+          duration: 1500,
+          message: res.data.msg,
+          type: "error",
+        });
+      }
+    }
+  });
+}
+function resetForm() {
+  visable.value = false;
+  accountId.value = "";
+  form.value.resetFields();
+}
+
+function showUpdateModal(item, type) {
+  visable.value = true;
+  accountId.value = item.id;
+  console.log(item);
+  ruleForm.value = {
+    name: item.userName,
+    phone: item.phone,
+    sharePermission: item.sharePermission,
+  };
+}
+
+async function changeSharePermission(sharePermission, item) {
+  let postData = {
+    accountId: item.id,
+    name: item.userName,
+    phone: item.phone,
+    sharePermission,
+    loginAccountId: loginAccountId.value,
+  };
+
+  let res = await api["updateClient"](postData);
+  if (res.data.status == 0) {
+    ElNotification({
+      title: "成功",
+      duration: 1500,
+      message: res.data.msg,
+      type: "success",
+    });
+    resetForm();
+    getClientList();
+  } else {
+    ElNotification({
+      title: "失败",
+      duration: 1500,
+      message: res.data.msg,
+      type: "error",
+    });
+  }
+}
+
+onMounted(() => {
+  loginAccountId.value = localStorage.loginAccountId;
+  getClientList();
+});
+</script>
+
+<style scoped>
+.seach-btn {
+  display: inline-block;
+  width: 60px;
+  height: 38px;
+  background: #0094fe;
+  border-radius: 2px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  text-align: center;
+  line-height: 38px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+</style>

src/views/voyage/voyageList.vue

@@ -72,6 +72,7 @@
           size="small"
           v-auth="'DOWNLOADVOYAGELIST'"
           @click="showExportModal('航次列表')"
+          style="margin-left: 10px; margin-bottom: 10px"
           >导出航次列表</el-button
         >
         <el-button
@@ -203,10 +204,204 @@
         </span>
       </template>
     </el-dialog>
+    <!-- <div class="mt20">
+      <p class="mr20 df aic" style="font-size: 14px; color: #333">
+        列表筛选:
+        <el-checkbox
+          class="ml20"
+          v-model="selectAllVisable"
+          label="全选"
+          size="default"
+          @change="selectAll"
+        />
+      </p>
+      <el-checkbox
+        v-model="voyageNameVisable"
+        label="航次名称"
+        size="default"
+        @change="selectSingle"
+        disabled
+      />
+      <el-checkbox
+        v-model="loadPortVisable"
+        label="装货港"
+        size="default"
+        @change="selectSingle"
+      />
+      <el-checkbox
+        v-model="dischargePortVisable"
+        label="卸货港"
+        size="default"
+        @change="selectSingle"
+      />
+      <el-checkbox
+        v-model="expectedArrivalTimeVisable"
+        label="预计到港时间"
+        size="default"
+        @change="selectSingle"
+      />
+      <el-checkbox
+        v-model="abnormalStatusVisable"
+        label="航次状态"
+        size="default"
+        @change="selectSingle"
+      />
+      <el-checkbox
+        v-model="daysInPortVisable"
+        label="在港天数"
+        size="default"
+        @change="selectSingle"
+      />
+      <el-checkbox
+        v-model="todayPhotoCountVisable"
+        label="今日照片"
+        size="default"
+        @change="selectSingle"
+      />
+      <el-checkbox
+        v-model="cargoVisable"
+        label="货种"
+        size="default"
+        @change="selectSingle"
+      />
+      <el-checkbox
+        v-model="actualLoadTonsVisable"
+        label="装载吨位"
+        size="default"
+        @change="selectSingle"
+      />
+      <el-checkbox
+        v-model="unloadedtonsVisable"
+        label="已卸货吨位"
+        size="default"
+        @change="selectSingle"
+      />
+      <el-checkbox
+        v-model="remainTonsVisable"
+        label="剩余吨位"
+        size="default"
+        @change="selectSingle"
+      />
+      <el-checkbox
+        v-model="hasInsuranceVisable"
+        label="保险状态"
+        size="default"
+        @change="selectSingle"
+      />
+    </div> -->
+    <div
+      class="df aic jcfs mt20"
+      style="
+        font-size: 14px;
+        color: #333;
+        width: calc(100vw - 300px);
+        flex-wrap: wrap;
+      "
+    >
+      <div class="df jcsb aic mb10 mr20">
+        <div class="mr10">装货港:</div>
+        <el-select
+          style="width: 120px"
+          v-model="voyageListPostData.loadPortId"
+          placeholder="装货港"
+          size="small"
+          @change="getVoyageList"
+          @focus="getPortSelect"
+          filterable
+        >
+          <el-option
+            v-for="item in portOptions"
+            :key="item"
+            :label="item.value"
+            :value="item.key"
+          />
+        </el-select>
+      </div>
+      <div class="df jcsb aic mb10 mr20">
+        <div class="mr10">卸货港:</div>
+        <el-select
+          style="width: 120px"
+          v-model="voyageListPostData.discPortId"
+          placeholder="卸货港"
+          size="small"
+          @change="getVoyageList"
+          @focus="getPortSelect"
+          filterable
+        >
+          <el-option
+            v-for="item in portOptions"
+            :key="item"
+            :label="item.value"
+            :value="item.key"
+          />
+        </el-select>
+      </div>
+      <div class="df jcsb aic mb10 mr20">
+        <div class="mr10">预计到港时间:</div>
+        <el-select
+          style="width: 120px"
+          v-model="voyageListPostData.isArrived"
+          placeholder="到港状态"
+          size="small"
+          @change="getVoyageList"
+        >
+          <el-option label="已到港" :value="0" />
+          <el-option label="未到港" :value="1" />
+        </el-select>
+      </div>
+      <div class="df jcsb aic mb10 mr20">
+        <div class="mr10">航次状态:</div>
+        <el-select
+          style="width: 120px"
+          v-model="voyageListPostData.abnormalStatus"
+          placeholder="航次状态"
+          size="small"
+          @change="getVoyageList"
+        >
+          <el-option label="正常" :value="0" />
+          <el-option label="异常" :value="1" />
+        </el-select>
+      </div>
+      <div class="df jcsb aic mb10 mr20">
+        <div class="mr10">货种:</div>
+        <el-select
+          style="width: 100px"
+          v-model="voyageListPostData.cargo"
+          placeholder="货种"
+          size="small"
+          @change="getVoyageList"
+          @focus="getCargoSelect"
+          filterable
+        >
+          <el-option
+            v-for="item in cargoOptions"
+            :key="item"
+            :label="item.key"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+      <div class="df jcsb aic mb10 mr20">
+        <div class="mr10">保险状态:</div>
+        <el-select
+          style="width: 120px"
+          v-model="voyageListPostData.hasInsurance"
+          placeholder="保险状态"
+          size="small"
+          @change="getVoyageList"
+        >
+          <el-option label="未购买" :value="0" />
+          <el-option label="已购买" :value="1" />
+        </el-select>
+      </div>
+      <el-button @click="resetFilter" class="mb10" size="small" type="primary"
+        >重置</el-button
+      >
+    </div>
     <el-table
       :data="tableData"
       stripe
-      style="width: 100%; margin-top: 24px"
+      style="width: 100%; margin-top: 12px"
       :row-style="rowStyle"
     >
       <!-- <el-table-column
@@ -218,18 +413,21 @@
       <el-table-column
         prop="voyageName"
         label="航次名称"
+        v-if="voyageNameVisable"
         min-width="140"
         align="center"
       ></el-table-column>
       <el-table-column
         prop="loadPort"
         label="装货港"
+        v-if="loadPortVisable"
         min-width="90"
         align="center"
       ></el-table-column>
       <el-table-column
         prop="dischargePort"
         label="卸货港"
+        v-if="dischargePortVisable"
         min-width="80"
         align="center"
       ></el-table-column>
@@ -242,6 +440,7 @@
       <el-table-column
         prop="expectedArrivalTime"
         label="预计到港时间"
+        v-if="expectedArrivalTimeVisable"
         sortable
         min-width="140"
         align="center"
@@ -253,6 +452,7 @@
       <el-table-column
         prop="abnormalStatus"
         label="航次状态"
+        v-if="abnormalStatusVisable"
         min-width="80"
         align="center"
       >
@@ -263,6 +463,7 @@
       <el-table-column
         prop="daysInPortStr"
         label="在港天数"
+        v-if="daysInPortVisable"
         sortable
         min-width="100"
         align="center"
@@ -270,11 +471,13 @@
       <el-table-column
         prop="todayPhotoCount"
         label="今日照片"
-        min-width="70"
+        v-if="todayPhotoCountVisable"
+        min-width="100"
         align="center"
       ></el-table-column>
       <el-table-column
         prop="cargo"
+        v-if="cargoVisable"
         label="货种"
         min-width="70"
         align="center"
@@ -282,18 +485,21 @@
       <el-table-column
         prop="actualLoadTons"
         label="装载吨位"
+        v-if="actualLoadTonsVisable"
         min-width="80"
         align="center"
       ></el-table-column>
       <el-table-column
         prop="unloadedtons"
         label="已卸货吨位"
-        min-width="80"
+        v-if="unloadedtonsVisable"
+        min-width="100"
         align="center"
       ></el-table-column>
       <el-table-column
         prop="remainTons"
         label="剩余吨位"
+        v-if="remainTonsVisable"
         min-width="80"
         align="center"
       ></el-table-column>
@@ -323,7 +529,8 @@
       <el-table-column
         prop="hasInsurance"
         label="保险状态"
-        min-width="70"
+        v-if="hasInsuranceVisable"
+        min-width="100"
         align="center"
       >
         <template v-slot="scope">
@@ -392,10 +599,13 @@ let term = ref("");
 let tableData = ref([]);
 let total = ref(0);
 let status = ref(0);
+let loginAccountId = ref("");
+let voyageListPostData = ref({});
 async function getVoyageList() {
   tableData.value = [];
 
   let res = await api.getVoyageList({
+    ...voyageListPostData.value,
     loginAccountId: localStorage.loginAccountId,
     cargoOwnerId: localStorage.userId,
     shipId: 0,
@@ -796,14 +1006,98 @@ async function exportZip() {
 
 function rowStyle({ row }) {
   let rowStyle = {};
-  if (row.daysInPort >= 30) {
-    rowStyle.color = "red";
-    return rowStyle;
+
+  if (row.daysInPort >= 20 && row.daysInPort < 25) {
+    rowStyle.color = "#f9ca24";
+  } else if (row.daysInPort >= 25 && row.daysInPort < 30) {
+    rowStyle.color = "#f0932b";
+  } else if (row.daysInPort >= 30) {
+    rowStyle.color = "#eb4d4b";
+  }
+
+  return rowStyle;
+}
+
+let voyageNameVisable = ref(true);
+let loadPortVisable = ref(true);
+let dischargePortVisable = ref(true);
+let expectedArrivalTimeVisable = ref(true);
+let abnormalStatusVisable = ref(true);
+let daysInPortVisable = ref(true);
+let todayPhotoCountVisable = ref(true);
+let cargoVisable = ref(true);
+let actualLoadTonsVisable = ref(true);
+let unloadedtonsVisable = ref(true);
+let remainTonsVisable = ref(true);
+let hasInsuranceVisable = ref(true);
+
+let selectAllVisable = ref(true);
+function selectAll(e) {
+  loadPortVisable.value = e;
+  dischargePortVisable.value = e;
+  expectedArrivalTimeVisable.value = e;
+  abnormalStatusVisable.value = e;
+  daysInPortVisable.value = e;
+  todayPhotoCountVisable.value = e;
+  cargoVisable.value = e;
+  actualLoadTonsVisable.value = e;
+  unloadedtonsVisable.value = e;
+  remainTonsVisable.value = e;
+  hasInsuranceVisable.value = e;
+}
+
+function selectSingle(e) {
+  if (!e) {
+    selectAllVisable.value = e;
   }
 }
 
+let loadPortFilterStr = ref("");
+function selectLoadPortFilter(item) {
+  voyageListPostData.value.loadPortId = item.key;
+  getVoyageList();
+}
+let discPortFilterStr = ref("");
+function selectDiscPortFilter(item) {
+  voyageListPostData.value.discPortId = item.key;
+  getVoyageList();
+}
+let cargoFilterStr = ref("");
+function selectCargoFilter(item) {
+  voyageListPostData.value.cargo = item.key;
+  getVoyageList();
+}
+
+function resetFilter() {
+  loadPortFilterStr.value = "";
+  discPortFilterStr.value = "";
+  cargoFilterStr.value = "";
+  voyageListPostData.value = {};
+  getVoyageList();
+}
+let cargoOptions = ref([]);
+async function getCargoSelect() {
+  if (cargoOptions.value.length) return;
+  let res = await api.getCargoSelect({
+    loginAccountId: loginAccountId.value,
+    status: 2,
+    term: "",
+  });
+  cargoOptions.value = res.data.result;
+}
+
+let portOptions = ref([]);
+async function getPortSelect() {
+  if (portOptions.value.length) return;
+  let res = await api.getCol({
+    term: "",
+  });
+  portOptions.value = res.data.result;
+}
+
 onMounted(() => {
   getVoyageList();
+  loginAccountId.value = localStorage.loginAccountId;
 });
 </script>
 <style scoped>