TaskSystem-admin/src/views/card/index.vue

<template>
  <div>
    <el-card class="!border-none" v-loading="pager.loading" shadow="never">
      <el-form class="mb-[-16px]" 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="contract_no">
          <el-input
            class="w-[280px]"
            v-model="queryParams.company_b_user"
            clearable
            placeholder="请输入联系人"
          /> </el-form-item
        ><el-form-item label="联系方式" prop="status">
          <el-input
            class="w-[280px]"
            v-model="queryParams.company_b_phone"
            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>
      <div class="mt-4">
        <el-table
          :data="pager.lists"
          :default-sort="{ prop: 'create_time', order: 'descending' }"
        >
          <el-table-column
            label="公司名称"
            :width="250"
            prop="company_b_name"
            show-overflow-tooltip
          />
          <el-table-column
            label="社会代码"
            prop="company_b_code"
            show-overflow-tooltip
          />
          <el-table-column
            label="主要联系人"
            prop="company_b_user"
            show-overflow-tooltip
          />
          <el-table-column
            label="联系方式"
            prop="company_b_phone"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            label="租车数量"
            prop="num"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            label="合同状态"
            prop="num"
            align="center"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              {{ row.status >= 3 ? "已签约" : "未签约" }}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="auto"
            fixed="right"
          >
            <template #default="{ row }">
              <el-button type="primary" link>
                <router-link
                  :to="{
                    path: '/contract/card_detail',
                    query: {
                      id: row.id,
                    },
                  }"
                  >查看</router-link
                >
              </el-button>

              <!-- <el-button type="primary" link @click="test(row.id)">
                查看
              </el-button> -->
              <el-button
                v-if="row.status == 1"
                type="primary"
                link
                @click="sendContractFn(row.id)"
                >发送合同</el-button
              >
              <el-button
                v-if="row.status == 2"
                :disabled="row.nums > 0"
                @click="sendAgain(row.id)"
                link
                type="primary"
                >重新发送{{ row.nums ? row.nums + "s" : "" }}</el-button
              >
            </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"
      @success="getLists"
      @close="showEdit = false"
    />
  </div>
</template>

<script lang="ts" setup name="flowTypeLists">
import { usePaging } from "@/hooks/usePaging";
import { useDictData } from "@/hooks/useDictOptions";
// import { contractList, sendContract, sendMsg } from "@/api/contract";
import { apiContractLists, sendContract, sendMsg } from "@/api/car_contract";
import feedback from "@/utils/feedback";

const sendAgain = (id: number) => {
  sendMsg({ id }).then((res) => {
    var inde = pager.lists.findIndex(function (element) {
      return element.id === id;
    });
    index.value = inde;
    pager.lists[index.value].nums = 10;
    timeFn(index.value);
  });
};
const timeFn = (i: number) => {
  const timers = setInterval(() => {
    pager.lists[i].nums--;
    if (pager.lists[i].nums <= 0) {
      clearInterval(timers);
    }
  }, 1000);
};
const index = ref(0);

const sendContractFn = (id: number) => {
  sendContract({ id }).then((res) => {
    feedback.msgSuccess("发送成功");
    var inde = pager.lists.findIndex(function (element) {
      return element.id === id;
    });
    index.value = inde;
    pager.lists[index.value].status = 2;
    pager.lists[index.value].nums = 10;
    timeFn(index.value);
  });
};
const test = () => {
  //   console.log(5454);
};
// 查询条件
const queryParams = reactive({
  company_name: "",
  company_b_user: "",
  company_b_phone: "",
});
// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
  fetchFun: apiContractLists,
  params: queryParams,
});
// console.log(pager.lists);

const handleView = async (data: any) => {
  showEdit.value = true;
  await nextTick();
  editRef.value?.open(data.id);
};
getLists().then((res) => {
  pager.lists.forEach((item, index) => {
    item.nums = 0;
  });
});
</script>