新增押金凭证录入

.env.development

@@ -1,6 +1,8 @@
 NODE_ENV = 'development'
 
-VITE_APP_BASE_URL = 'https://ceshi-worker-task.lihaink.cn'
+VITE_APP_BASE_URL = 'http://192.168.1.12:8001'
+
+# VITE_APP_BASE_URL = 'https://ceshi-worker-task.lihaink.cn'
 
 # VITE_APP_BASE_URL = 'https://preview-worker-task.lihaink.cn'
 

src/api/company.ts

@@ -65,4 +65,16 @@ export function companyResponsibleArea(params: any) {
 // 人脸采集
 export function organizationFaceCreate(params: any) {
     return request.get({ url: '/company/organizationFaceCreate', params })
-}
+}
+
+// 押金线下对公账号转账凭证录入接口
+export function depositRechargeTransferVoucher(params: any) {
+    return request.post({ url: '/company/depositRechargeTransferVoucher', params })
+}
+
+// 获取押金凭证录入列表
+export function getDepositRechargeTransferVoucherList(params: any) {
+    return request.get({ url: '/company/getDepositRechargeTransferVoucherList', params })
+}
+
+

src/views/finance/component/voucher.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="edit-popup">
+    <popup
+      ref="popupRef"
+      :title="popupTitle"
+      :async="true"
+      width="550px"
+      @confirm="handleSubmit"
+      @close="handleClose"
+    >
+      <el-form
+        ref="formRef"
+        :model="formData"
+        label-width="90px"
+        :rules="formRules"
+      >
+        <el-form-item label="公司名称" prop="company_name">
+          <el-input
+            readonly
+            v-model="formData.company_name"
+            clearable
+            placeholder=""
+          />
+        </el-form-item>
+        <el-form-item label="主要联系人" prop="master_name">
+          <el-input
+            readonly
+            v-model="formData.master_name"
+            clearable
+            placeholder=""
+          />
+        </el-form-item>
+        <el-form-item label="联系电话" prop="master_phone">
+          <el-input
+            readonly
+            v-model="formData.master_phone"
+            clearable
+            placeholder=""
+          />
+        </el-form-item>
+        <el-form-item label="押金金额" prop="deposit">
+          <el-input
+            v-model="formData.deposit"
+            type="number"
+            :maxlength="10"
+            clearable
+            placeholder="请输入押金金额"
+          />
+        </el-form-item>
+        <el-form-item label="上传凭证" prop="voucher">
+          <el-upload
+            class="upload-demo"
+            style="width: 100%"
+            drag
+            :accept="fileTypeList.join(', ')"
+            :headers="{ Token: userStore.token }"
+            :action="actionUrl"
+            :limit="1"
+            :on-success="handleFile"
+            :on-exceed="handleExceed"
+            :before-upload="beforeUpload"
+            :before-remove="removeFile"
+            ref="upload"
+          >
+            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+            <div class="el-upload__text">文件拖入或点击上传</div>
+            <template #tip>
+              <div class="el-upload__tip">请上传JPG/JPEG/PNG/GIF/PDF文件</div>
+            </template>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+    </popup>
+  </div>
+</template>
+  
+  <script lang="ts" setup name="withdrawEdit">
+import type {
+  FormInstance,
+  UploadRawFile,
+  UploadFile,
+  UploadFiles,
+} from "element-plus";
+import { genFileId } from "element-plus";
+import Popup from "@/components/popup/index.vue";
+import {
+  apiWithdrawAdd,
+  apiWithdrawEdit,
+  apiWithdrawDetail,
+} from "@/api/withdraw";
+import { timeFormat } from "@/utils/util";
+import type { PropType } from "vue";
+import { depositRechargeTransferVoucher } from "@/api/company.ts";
+import { inject } from "vue";
+const base_url: any = inject("base_url");
+import useUserStore from "@/stores/modules/user";
+import { rules } from "@/views/channel/wx_oa/menu_com/useMenuOa";
+const userStore = useUserStore();
+defineProps({
+  dictData: {
+    type: Object as PropType<Record<string, any[]>>,
+    default: () => ({}),
+  },
+});
+const emit = defineEmits(["success", "close"]);
+const formRef = shallowRef<FormInstance>();
+const popupRef = shallowRef<InstanceType<typeof Popup>>();
+const mode = ref("add");
+
+// 弹窗标题
+const popupTitle = computed(() => {
+  return "凭证录入";
+});
+
+// 表单数据
+const formData = reactive({
+  id: "",
+  company_name: "",
+  master_name: "",
+  master_phone: "",
+  deposit: "", // 钱
+  voucher: "", // 凭证
+});
+
+// 表单验证
+const formRules = reactive<any>({
+  deposit: [
+    {
+      required: true,
+      message: "请输入押金金额",
+      trigger: ["blur"],
+    },
+  ],
+  voucher: [
+    {
+      required: true,
+      message: "请上传凭证",
+      trigger: ["blur", "change"],
+    },
+  ],
+});
+
+// 文件选择
+const upload = ref(null);
+// 文件上传地址
+const actionUrl = ref("");
+const fileTypeList = [
+  "application/pdf",
+  "image/jpeg",
+  "image/gif",
+  "image/png",
+];
+// 限制上传类型
+const beforeUpload = (rawFile: UploadRawFile) => {
+  if (!fileTypeList.includes(rawFile.type)) {
+    ElMessage.error("请上传JPG/JPEG/PNG/GIF/PDF文件");
+    return false;
+  }
+  if (rawFile.type != "application/pdf") {
+    actionUrl.value = base_url + "/upload/image";
+  } else {
+    actionUrl.value = base_url + "/upload/file";
+  }
+  return true;
+};
+
+const handleExceed = (files: any) => {
+  upload.value!.clearFiles();
+  const file = files[0] as UploadRawFile;
+  file.uid = genFileId();
+  upload.value!.handleStart(file);
+  upload.value!.submit();
+};
+
+const removeFile = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+  formData.voucher = "";
+  return true;
+};
+
+// 上传文件
+const handleFile = (e: any) => {
+  if (e.code == 0 && e.show == 1) {
+    formData.voucher = "";
+    upload.value!.clearFiles();
+    return ElMessage.error(e.msg || "上传失败");
+  }
+  formData.voucher = e.data.uri;
+};
+
+// 查看凭证
+const openTransfer = (uri: any) => {
+  window.open(uri);
+};
+
+// 获取详情
+const setFormData = async (data: Record<any, any>) => {
+  let obj = {
+    id: "",
+    company_name: "",
+    master_name: "",
+    master_phone: "",
+  };
+  for (const key in obj) {
+    if (data[key] != null && data[key] != undefined) {
+      //@ts-ignore
+      formData[key] = data[key];
+    }
+  }
+};
+
+const getDetail = async (row: Record<string, any>) => {
+  const data = await apiWithdrawDetail({
+    id: row.id,
+  });
+  setFormData(data);
+};
+
+// 提交按钮
+const handleSubmit = async () => {
+  if (!formData.id) return ElMessage.error("请先选择公司");
+  await formRef.value?.validate();
+  const data = { ...formData };
+  await depositRechargeTransferVoucher({
+    company_id: data.id,
+    deposit: data.deposit,
+    voucher: data.voucher,
+  });
+  ElMessage.success("录入成功");
+  popupRef.value?.close();
+  emit("success");
+};
+
+//打开弹窗
+const open = (type = "add") => {
+  mode.value = type;
+  popupRef.value?.open();
+};
+
+// 关闭回调
+const handleClose = () => {
+  emit("close");
+};
+
+defineExpose({
+  open,
+  setFormData,
+  getDetail,
+});
+</script>
+  

src/views/finance/deposit.vue

@@ -0,0 +1,257 @@
+<template>
+  <div>
+    <el-card class="!border-none mb-4" shadow="never">
+      <el-form class="mb-[-16px] formdata" :model="queryParams" inline>
+        <el-form-item label="公司名称" prop="company_name">
+          <el-input
+            class="w-[280px]"
+            v-model="queryParams.company_name"
+            clearable
+            placeholder="请输入公司名称"
+          />
+        </el-form-item>
+        <el-form-item label="区" prop="area" v-show="company_type_show">
+          <el-input
+            class="w-[280px]"
+            v-model="queryParams.area"
+            clearable
+            placeholder="请输入区"
+          />
+        </el-form-item>
+        <el-form-item label="镇" prop="street" v-show="company_type_show">
+          <el-input
+            class="w-[280px]"
+            v-model="queryParams.street"
+            clearable
+            placeholder="请输入镇"
+          />
+        </el-form-item>
+        <el-form-item
+          label="公司类型"
+          prop="company_type"
+          v-show="company_type_show"
+        >
+          <el-select
+            v-model="queryParams.company_type"
+            placeholder="请选择公司类型"
+            clearable
+            class="w-[280px]"
+          >
+            <el-option
+              v-for="(item, index) in datas.dictTypeLists"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="片区经理" prop="area_manager">
+          <el-input
+            class="w-[280px]"
+            v-model="queryParams.area_manager"
+            clearable
+            placeholder="请输入片区经理"
+          />
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" @click="resetPage">查询</el-button>
+          <el-button @click="resetParams">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card class="!border-none" v-loading="pager.loading" shadow="never">
+      <div class="mt-4">
+        <el-table :data="pager.lists" @selection-change="handleSelectionChange">
+          <el-table-column
+            label="ID"
+            prop="id"
+            show-overflow-tooltip
+            width="80"
+          />
+          <el-table-column
+            label="公司名称"
+            prop="company_name"
+            width="300"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="公司类型"
+            prop="company_type"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="公司收益"
+            prop="deposit"
+            show-overflow-tooltip
+          >
+            <template #default="{ row }">
+              <span class="text-success">{{ row.deposit }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="区县" prop="area" show-overflow-tooltip />
+          <el-table-column label="乡镇" prop="street" show-overflow-tooltip />
+          <el-table-column
+            label="主联系人"
+            prop="master_name"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="联系方式"
+            prop="master_phone"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="片区经理"
+            prop="area_manager"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="操作"
+            align="center"
+            width="200"
+            fixed="right"
+          >
+            <template #default="{ row }">
+              <div style="display: flex">
+                <el-button type="primary" link @click="handleEdit(row)">
+                  凭证录入
+                </el-button>
+                <el-button type="primary" link>
+                  <router-link
+                    :to="{
+                      path: getRoutePath('finance.depositList'),
+                      query: {
+                        company_id: row.id,
+                      },
+                    }"
+                    >凭证列表</router-link
+                  >
+                </el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="flex mt-4 justify-end">
+        <pagination v-model="pager" @change="getLists" />
+      </div>
+    </el-card>
+
+    <edit-popup
+      v-if="showEdit"
+      ref="editRef"
+      :dict-data="dictData"
+      @success="getLists"
+      @close="showEdit = false"
+    />
+  </div>
+</template>
+  
+  <script lang="ts" setup name="financeCompanyLists">
+import { usePaging } from "@/hooks/usePaging";
+import { useDictData } from "@/hooks/useDictOptions";
+import useUserStore from "@/stores/modules/user";
+import { apiCompanyLists } from "@/api/company";
+import { timeFormat } from "@/utils/util";
+import { dictDataLists } from "@/api/setting/dict";
+import { getRoutePath } from "@/router";
+import { dictContractTypeList } from "@/utils/dict.ts";
+import EditPopup from "./component/voucher.vue";
+
+const userStore = useUserStore();
+// console.log(userStore.userInfo.company_id);
+const route = useRoute();
+const company_type_show = ref(true);
+
+// 是否显示编辑框
+const showEdit = ref(false);
+const editRef = ref(null);
+// 编辑
+const handleEdit = async (data: any) => {
+  showEdit.value = true;
+  await nextTick();
+  editRef.value?.open("edit");
+  editRef.value?.setFormData(data);
+};
+
+// 创建合同与发送短信结束
+// 查询条件
+const queryParams = reactive({
+  company_name: "",
+  area: "",
+  street: "",
+  company_type: "",
+  area_manager: "",
+  // 是否签约
+  is_contract: "",
+});
+
+if (route.query.company_type) {
+  company_type_show.value = false;
+  queryParams["company_type"] = route.query.company_type?.toString() || "";
+}
+
+const datas = reactive({
+  dictTypeLists: [],
+});
+const getdictTypeLists = async () => {
+  const data = await dictDataLists({ type_id: 6 });
+  datas["dictTypeLists"] = data["lists"];
+};
+getdictTypeLists();
+// 选中数据
+const selectData = ref<any[]>([]);
+
+// 表格选择后回调事件
+const handleSelectionChange = (val: any[]) => {
+  selectData.value = val.map(({ id }) => id);
+};
+
+// 获取字典数据
+const { dictData } = useDictData("");
+
+// 分页相关
+const { pager, getLists, resetParams, resetPage } = usePaging({
+  fetchFun: apiCompanyLists,
+  params: queryParams,
+});
+
+getLists();
+</script>
+  <style lang="scss">
+.btn {
+  position: absolute;
+}
+h1 {
+  text-align: center;
+  font-weight: bold;
+  font-size: 30px;
+  color: red;
+  margin-bottom: 10px;
+}
+
+.content {
+  font-size: 20px;
+}
+
+.info {
+  color: red;
+  font-weight: bold;
+  font-size: 18px;
+  display: inline-block;
+  margin: 0 5px;
+}
+
+.btn_menu {
+  margin-top: 10vh;
+  display: flex;
+  justify-content: space-around;
+}
+.formdata {
+  .el-form-item {
+    width: 20%;
+  }
+}
+</style>
+  

src/views/finance/depositList.vue

@@ -0,0 +1,215 @@
+<template>
+  <div>
+    <!-- <el-card class="!border-none mb-4" shadow="never">
+      <el-form class="mb-[-16px] formdata" :model="queryParams" inline>
+        <el-form-item>
+          <el-button type="primary" @click="resetPage">查询</el-button>
+          <el-button @click="resetParams">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card> -->
+    <el-card class="!border-none" v-loading="pager.loading" shadow="never">
+      <el-button type="primary" @click="handleEdit(company_info)"
+        >添加凭证</el-button
+      >
+      <div class="mt-4">
+        <el-table :data="pager.lists" @selection-change="handleSelectionChange">
+          <el-table-column
+            label="ID"
+            prop="id"
+            show-overflow-tooltip
+            width="80"
+          />
+          <el-table-column
+            label="公司名称"
+            prop="company_name"
+            width="300"
+            show-overflow-tooltip
+          >
+            <span>{{ company_info.company_name }}</span>
+          </el-table-column>
+          <el-table-column
+            label="充值金额"
+            prop="deposit"
+            width="180"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="凭证地址"
+            prop="voucher"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="创建时间"
+            prop="create_time"
+            width="200"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="更新时间"
+            prop="update_time"
+            width="200"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="操作"
+            align="center"
+            width="100"
+            fixed="right"
+          >
+            <template #default="{ row }">
+              <div style="display: flex">
+                <el-button
+                  type="primary"
+                  link
+                  @click="openTransfer(row.voucher)"
+                >
+                  查看凭证
+                </el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="flex mt-4 justify-end">
+        <pagination v-model="pager" @change="getLists" />
+      </div>
+    </el-card>
+
+    <edit-popup
+      v-if="showEdit"
+      ref="editRef"
+      :dict-data="dictData"
+      @success="getLists"
+      @close="showEdit = false"
+    />
+  </div>
+</template>
+  
+<script lang="ts" setup name="financeCompanyLists">
+import { usePaging } from "@/hooks/usePaging";
+import { useDictData } from "@/hooks/useDictOptions";
+import useUserStore from "@/stores/modules/user";
+import {
+  apiCompanyLists,
+  apiCompanyDetail,
+  getDepositRechargeTransferVoucherList,
+} from "@/api/company";
+import { timeFormat } from "@/utils/util";
+import { dictDataLists } from "@/api/setting/dict";
+import { getRoutePath } from "@/router";
+import { dictContractTypeList } from "@/utils/dict.ts";
+import EditPopup from "./component/voucher.vue";
+
+const userStore = useUserStore();
+// console.log(userStore.userInfo.company_id);
+const route = useRoute();
+
+// 是否显示添加框
+const showEdit = ref(false);
+const editRef = ref(null);
+// 添加
+const handleEdit = async (data: any) => {
+  showEdit.value = true;
+  await nextTick();
+  editRef.value?.open("edit");
+  editRef.value?.setFormData(data);
+};
+
+const company_info = reactive({
+  id: "",
+  company_name: "",
+  master_name: "",
+  master_phone: "",
+});
+
+const getCompanyInfo = () => {
+  apiCompanyDetail({ id: queryParams.company_id }).then((data) => {
+    for (const key in company_info) {
+      if (data[key] != null && data[key] != undefined) {
+        //@ts-ignore
+        company_info[key] = data[key];
+      }
+    }
+  });
+};
+
+// 查看凭证
+const openTransfer = (uri: any) => {
+  window.open(uri);
+};
+
+// 创建合同与发送短信结束
+// 查询条件
+const queryParams = reactive({
+  company_id: "",
+});
+
+if (route.query.company_id) {
+  queryParams["company_id"] = route.query.company_id;
+  getCompanyInfo();
+}
+
+const datas = reactive({
+  dictTypeLists: [],
+});
+const getdictTypeLists = async () => {
+  const data = await dictDataLists({ type_id: 6 });
+  datas["dictTypeLists"] = data["lists"];
+};
+getdictTypeLists();
+// 选中数据
+const selectData = ref<any[]>([]);
+
+// 表格选择后回调事件
+const handleSelectionChange = (val: any[]) => {
+  selectData.value = val.map(({ id }) => id);
+};
+
+// 获取字典数据
+const { dictData } = useDictData("");
+
+// 分页相关
+const { pager, getLists, resetParams, resetPage } = usePaging({
+  fetchFun: getDepositRechargeTransferVoucherList,
+  params: queryParams,
+});
+
+getLists();
+</script>
+  <style lang="scss">
+.btn {
+  position: absolute;
+}
+h1 {
+  text-align: center;
+  font-weight: bold;
+  font-size: 30px;
+  color: red;
+  margin-bottom: 10px;
+}
+
+.content {
+  font-size: 20px;
+}
+
+.info {
+  color: red;
+  font-weight: bold;
+  font-size: 18px;
+  display: inline-block;
+  margin: 0 5px;
+}
+
+.btn_menu {
+  margin-top: 10vh;
+  display: flex;
+  justify-content: space-around;
+}
+.formdata {
+  .el-form-item {
+    width: 20%;
+  }
+}
+</style>
+