TaskSystem-admin/src/views/contract/vehicle_list.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.contract_no"
            clearable
            placeholder="请输入合同编号"
          /> </el-form-item
        ><el-form-item label="合同状态" prop="status">
          <el-select
            v-model="queryParams.status"
            placeholder="请选择合同类型"
            clearable
            class="w-[280px]"
          >
            <el-option label="未上传" :value="0"></el-option>
            <el-option label="已上传" :value="1"></el-option>
          </el-select>
        </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' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column label="id" prop="id" />
          <el-table-column label="合同类型" align="center">
            <template #default="{ row }">
              {{ statusFn(row.type) }}
            </template>
          </el-table-column>
          <el-table-column
            label="合同编号"
            prop="contract_no"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            label="甲方"
            prop="company_a_name"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            label="乙方"
            prop="company_b_name"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            label="类型"
            prop="product_count"
            align="center"
            show-overflow-tooltip
          >
            <template #default="{ row }"> 公司 </template>
          </el-table-column>
          <el-table-column
            label="状态"
            prop="product_count"
            align="center"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              {{ row.status ? "已上传" : "待上传" }}
            </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: 'vehicle_detail',
                    query: {
                      id: row.id,
                    },
                  }"
                  >详情</router-link
                >
              </el-button>
              <el-button v-if="row.status >= 3" type="primary" link>
                <a :href="JSON.parse(row.contract_evidence).party_a"
                  >下载证据</a
                >
              </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 } from "@/api/contract";
import { leaseContractList } from "@/api/contract";
// 测试
// import EditPopup from "./edit.vue";
// let obj = [
//   {
//     cunid: 1,
//     zhgn: [
//       {
//         zhengid: 1,
//         dui: [1, 2, 3],
//       },

//       {
//         zhengid: 2,
//         dui: [1, 2, 3],
//       },
//     ],
//   },
//   {
//     cunid: 3,
//     zhgn: [
//       {
//         zhengid: 1,
//         dui: [1, 2, 3],
//       },

//       {
//         zhengid: 2,
//         dui: [1, 2, 3],
//       },
//     ],
//   },
// ];
interface User {
  date: string;
  name: string;
  address: string;
  tag: string;
}
// const sendContractFn = (id: number) => {
//   sendContract({ id }).then((res) => {
//     console.log(res);
//   });
// };
const editRef = shallowRef<InstanceType<typeof EditPopup>>();
// 是否显示编辑框
const showEdit = ref(false);
// 查询条件
// 'order_sn' =>订单编号,'shop_name'=> 商家名称,'shop_phone' => 商家电话,'shop_address' => 商家地址,'user_name' => 收件人名称,'user_address' => 收件人地址,'user_phone' =>收件人电话
const queryParams = reactive({
  company_name: "",
  contract_no: "",
  status: "",
});
const statusFn = (status: number) => {
  switch (status) {
    case 0:
      return "租赁合同";
      break;
    case 1:
      return "自由车辆合同";
      break;
    case 2:
      return "解除合同";
      break;
    case 3:
      return "签约成功";
      break;
    case 4:
      return "被驳回";
      break;
    default:
      break;
  }
};
// 选中数据
const selectData = ref<any[]>([]);

// 表格选择后回调事件
const handleSelectionChange = (val: any[]) => {
  selectData.value = val.map(({ id }) => id);
};
const filterHandler = (value: string, row: any, column: any) => {
  return row.status == value;
};
// 获取字典数据
const { dictData } = useDictData("");
// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
  fetchFun: leaseContractList,
  params: queryParams,
});
const handleView = async (data: any) => {
  showEdit.value = true;
  await nextTick();
  editRef.value?.open(data.id);
};
getLists();
</script>