pubilc_basic/src/views/policyfile/index.vue

<template>
  <div id="index">
    <van-row>
      <van-col span="24" class="main animate__animated animate__backInRight">
        <van-col span="24" class="one">
          <van-col span="20" class="one_1">
            <van-field v-model="searchForm.name" placeholder="请输入文件标题" @blur="toInput" />
          </van-col>
          <van-col span="4" class="one_2">
            <van-button size="small" @click="toAdd" :disabled="!is_show">新增</van-button>
          </van-col>
        </van-col>
        <van-col span="24" class="two">
          <van-col span="24" class="list" v-for="i in list" :key="i._id">
            <van-col span="24" class="name">{{ i.title }}</van-col>
            <van-col span="24" class="other">
              <van-col span="24" class="other_1">
                <span>文件：</span>
                <span v-for="r in i.file" :key="r.url" @click="toDownload(r)">{{ r.name }}；</span>
              </van-col>
            </van-col>
            <van-col span="24" class="btn">
              <van-button type="primary" size="small" @click="toEdit(i)">信息编辑</van-button>
              <van-button type="danger" size="small" @click="toDel(i)">信息删除</van-button>
            </van-col>
          </van-col>
        </van-col>
        <van-col span="24" class="thr">
          <cPage :total="total" :limit="limit" @search="search"> </cPage>
        </van-col>
      </van-col>
    </van-row>
  </div>
</template>

<script setup lang="ts">
// 基础
import _ from 'lodash';
import type { Ref } from 'vue';
import { onMounted, ref, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import { showConfirmDialog, showToast } from 'vant';
// 接口
import { PolicyfileStore } from '@common/src/stores/basic/policyfile';
import type { IQueryResult } from '@/util/types.util';
import store from '@/stores/counter';
const polAxios = PolicyfileStore();

// 基本设置
const { proxy } = getCurrentInstance() as any;

// 路由
const router = useRouter();

// 是否显示
const is_show: Ref<any> = ref(false);

const list: Ref<any> = ref([]);
const total: Ref<any> = ref(0);
const skip = 0;
const limit: number = proxy.$limit;
// 查询
const searchForm: Ref<any> = ref({});

// 请求
onMounted(async () => {
  await searchUser();
  await search({ skip, limit });
});
const searchUser = () => {
  let user = store.state.user as any;
  if (user.role_type == '0' || user.role_type == '1') {
    is_show.value = true;
  }
};
const search = async (e: { skip: number; limit: number }) => {
  const { skip, limit } = e;
  const condition = _.cloneDeep(searchForm.value);
  let info = { limit: limit, skip: skip, ...condition };
  let res: IQueryResult = await polAxios.query(info);
  if (res.errcode == 0) {
    list.value = res.data as [];
    total.value = res.total;
  }
};
// 名称查询
const toInput = () => {
  search({ skip, limit });
};
// 新增
const toAdd = () => {
  router.push({ path: '/policyfile/detail' });
};
// 信息修改
const toEdit = (e) => {
  router.push({ path: '/policyfile/detail', query: { id: e._id } });
};
// 信息删除
const toDel = async (e) => {
  showConfirmDialog({
    title: '提示',
    message: '您确认删除该数据？',
    width: '100%'
  })
    .then(async () => {
      let res: IQueryResult = await polAxios.del(e._id);
      if (res.errcode == '0') {
        showToast({ message: '信息删除成功', type: 'success', duration: 500 });
        search({ skip, limit });
      } else {
        showToast({ message: `${res.errmsg}`, type: 'fail', duration: 500 });
      }
    })
    .catch(() => {});
};
// 查看文件
const toDownload = (e) => {
  window.location.href = `${e.url}`;
};
</script>
<style scoped lang="scss">
.main {
  height: 100vh;
  overflow: hidden;
  .one {
    display: flex;
    padding: 10px;
    height: 9vh;
    .one_1 {
      .van-cell {
        padding: 5px;
        border: 1px solid #f1f1f1;
      }
    }
    .one_2 {
      .van-button {
        width: 100%;
        height: 5.4vh;
      }
    }
  }
  .two {
    height: 85vh;
    overflow-y: auto;
    padding: 0 10px;
    .list {
      border: 1px solid #f1f1f1;
      margin: 0 0 10px 0;
      padding: 10px;
      border-radius: 5px;
      .name {
        font-size: 16px;
        font-weight: bold;
        margin: 0 0 5px 0;
      }
      .other {
        margin: 0 0 5px 0;
        .other_1 {
          font-size: 14px;
        }
      }
      .btn {
        text-align: center;
        .van-button {
          margin: 0 10px;
        }
      }
    }
  }
  .thr {
    height: 6vh;
    overflow: hidden;
  }
}
</style>