新增 货主列表;新增货主

src/apis/fetch.js

@@ -4,8 +4,14 @@ export default {
   staffLogin(data) {
     return $http("post", "staff/backstage/login", data);
   },
-  // 小程序登录
-  miniLogin(data) {
-    return $http("post", "user/wx/login", data);
+
+  // 获取货主列表
+  getCargoOwnerList(data) {
+    return $http("post", "user/backstage/list", data);
+  },
+
+  // 添加用户
+  addUser(data) {
+    return $http("post", "user/backstage/add", data);
   },
 };

src/views/cargoOwnerManage/cargoOwnerList.vue

@@ -1,20 +1,151 @@
 <template>
-  <el-input v-model="term"></el-input>
-  <h3>{{ term }}</h3>
-  <button @click="getCargoOwnerList">getCargoOwnerList</button>
+  <div style="display: flex; justify-content: space-between">
+    <div style="display: flex">
+      <el-input
+        placeholder="请输入货主名称/联系人/联系人手机号"
+        prefix-icon="el-icon-search"
+        v-model="term"
+        style="height: 32px; width: 330px; line-height: 32px"
+      ></el-input>
+      <div class="seach-btn" @click="getCargoOwnerList">查询</div>
+    </div>
+    <div class="cargo-owner-add" @click="dialogFormVisible = true">
+      添加货主
+    </div>
+    <el-dialog
+      title="添加货主"
+      :visible="dialogFormVisible"
+      v-model:visible="dialogFormVisible"
+    >
+      <template v-slot:default>
+        <el-form
+          :model="ruleForm"
+          :rules="rules"
+          ref="form"
+          label-width="110px"
+          label-position="left"
+        >
+          <el-form-item prop="userName" label="货主名称">
+            <el-input
+              style="width: 280px"
+              v-model="ruleForm.userName"
+            ></el-input>
+          </el-form-item>
+          <el-form-item prop="contactName" label="联系人">
+            <el-input
+              style="width: 280px"
+              v-model="ruleForm.contactName"
+            ></el-input>
+          </el-form-item>
+          <el-form-item prop="userPhone" label="联系人手机号">
+            <el-input
+              style="width: 280px"
+              v-model="ruleForm.userPhone"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </template>
+      <template v-slot:footer>
+        <div class="dialog-footer">
+          <el-button @click="resetForm">取 消</el-button>
+          <el-button type="primary" @click="addCargoOwner(ruleForm)">
+            确 定
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+  <div style="margin-top: 24px">
+    <el-table :data="tableData" stripe style="width: 100%">
+      <el-table-column
+        type="index"
+        label="序号"
+        min-width="80"
+        align="center"
+      ></el-table-column>
+      <el-table-column
+        prop="userName"
+        label="货主"
+        min-width="120"
+        align="center"
+      ></el-table-column>
+      <el-table-column
+        prop="contactName"
+        label="联系人"
+        min-width="120"
+        align="center"
+      ></el-table-column>
+      <el-table-column
+        prop="userPhone"
+        label="联系人手机号"
+        min-width="160"
+        align="center"
+      ></el-table-column>
+      <el-table-column
+        prop="createTime"
+        label="入驻时间"
+        min-width="200"
+        align="center"
+      ></el-table-column>
+      <el-table-column label="操作" min-width="80" align="center">
+        <template v-slot="scope">
+          <el-button
+            @click="cargoOwnerDetail(scope.row, tableData)"
+            type="text"
+            size="small"
+          >
+            查看详情
+          </el-button>
+        </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>
 </template>
 <script>
-import { ref, reactive, toRefs, onMounted } from "vue";
-import { Notification } from "element3";
+import { ref, h, reactive, toRefs, onMounted } from "vue";
+import { Notification, Msgbox, Message } from "element3";
 import store from "../../store";
 import router from "../../router";
-
 import md5 from "md5";
 import api from "../../apis/fetch";
+
 export default {
   setup() {
     let currentPage = ref(1);
     let term = ref();
+    let tableData = ref();
+    let total = ref();
+    let dialogFormVisible = ref(false);
+    let form = ref(null);
+    const ruleForm = reactive({
+      ruleForm: {
+        userName: "",
+        contactName: "",
+        userPhone: "",
+      },
+    });
+    const rules = reactive({
+      rules: {
+        userName: [
+          { required: true, message: "请填写货主名称", trigger: "blur" },
+        ],
+        contactName: [
+          { required: true, message: "请填写联系人", trigger: "blur" },
+        ],
+        userPhone: [
+          { required: true, message: "请填写手机号", trigger: "blur" },
+          { min: 11, max: 11, message: "请正确填写手机号", trigger: "blur" },
+        ],
+      },
+    });
     async function getCargoOwnerList() {
       let res = await api.getCargoOwnerList({
         identity: 2,
@@ -22,6 +153,57 @@ export default {
         size: 10,
         term: term.value,
       });
+      if (res.data.status == 0) {
+        tableData.value = res.data.result;
+        total.value = res.data.total;
+      }
+    }
+    function resetForm() {
+      dialogFormVisible.value = false;
+
+      form.value.resetFields();
+    }
+    async function addCargoOwner() {
+      form.value.validate(async (valid) => {
+        if (valid) {
+          let { userName, contactName, userPhone } = ruleForm.ruleForm;
+          let res = await api.addUser({
+            identity: 2,
+            userName,
+            contactName,
+            userPhone,
+            pwdStrategy: 1,
+          });
+          console.log(res);
+          if (res.data.status == 0) {
+            Notification.success({
+              title: "添加成功",
+              duration: 0,
+              message: `${userName}:${res.data.msg}`,
+              type: "success",
+            });
+            resetForm();
+            getCargoOwnerList();
+          } else {
+            Notification.error({
+              title: "失败",
+              duration: 3000,
+              message: res.data.msg,
+            });
+          }
+        } else {
+          return false;
+        }
+      });
+    }
+
+    async function cargoOwnerDetail(e1, e2) {
+      console.log(e1);
+      console.log(e2);
+    }
+    function pageChange(e) {
+      currentPage.value = e;
+      getCargoOwnerList();
     }
     onMounted(() => {
       store.commit("changefirstTitle", "货主列表");
@@ -29,9 +211,65 @@ export default {
     return {
       currentPage,
       term,
+      tableData,
+      total,
       getCargoOwnerList,
+      addCargoOwner,
+      cargoOwnerDetail,
+      pageChange,
+      resetForm,
+      dialogFormVisible,
+      form,
+      ...toRefs(ruleForm),
+      ...toRefs(rules),
     };
   },
 };
 </script>
-<style scoped></style>
+<style scoped>
+.seach-btn {
+  display: inline-block;
+  width: 60px;
+  height: 32px;
+  background: #0094fe;
+  border-radius: 2px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  text-align: center;
+  line-height: 32px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+
+.cargo-owner-add {
+  width: 80px;
+  height: 32px;
+  border-radius: 2px;
+  border: 1px solid #0094fe;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #0094fe;
+  line-height: 32px;
+  text-align: center;
+  cursor: pointer;
+}
+:deep().el-input__icon {
+  line-height: 100% !important;
+}
+
+:deep().el-dialog {
+  width: 560px;
+  padding: 20px 50px;
+  border-radius: 6px;
+}
+
+:deep() .el-dialog__title {
+  font-size: 18px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #0094fe;
+}
+</style>