duty-management-web/src/views/system/notice-announcement/index.vue

<template>
  <div class="__normal-page">
    <div class="__normal-content">
      <CusContent
          v-model:tableHead="tableHead"
          @handleReset="handleReset"
          @handleSearch="onSearch"
      >
        <template #fieldOut>
          <CusForm labelWidth="100px" @handleEnter="onSearch">
            <CusFormColumn
                label="标题:"
                v-model:param="queryForm.shipId"/>
            <CusFormColumn
                label="发布单位:"
                v-model:param="queryForm.shipId"/>
            <CusFormColumn
                label="发布人:"
                v-model:param="queryForm.shipId"/>
            <CusFormColumn
                label="发布时间:"
                link="datetime"
                type="datetimerange"
                v-model:param="queryForm.shipId"/>
            <CusFormColumn
                label="类型:"
                link="select"
                static
                v-model:param="queryForm.shipId"
                labelKey="label"
                valueKey="value"
                :options="[
                    {label: '类型一', value: '1'},
                    {label: '类型二', value: '2'},
                    {label: '类型三', value: '3'},
                ]"/>
            <CusFormColumn
                label="状态:"
                link="select"
                static
                v-model:param="queryForm.shipId"
                labelKey="label"
                valueKey="value"
                :options="[
                    {label: '类型一', value: '1'},
                    {label: '类型二', value: '2'},
                    {label: '类型三', value: '3'},
                ]"/>
            <CusSearchButtons
                @handleReset="handleReset"
                @handleSearch="onSearch"
            />
          </CusForm>
        </template>
        <template #buttons>
          <div class="__cus-button_submit __hover" @click="onAdd">
            <SvgIcon name="add" size="16"/>新增
          </div>
        </template>
        <template #table>
          <CusTable
              v-loading="loading"
              ref="ref_cusTable"
              :tableData="queryResult.tableData"
              :tableHead="tableHead"
              :total="queryResult.total"
              :page="queryPage.pageNum"
              :pageSize="queryPage.pageSize"
              @handlePage="handlePage"
              @handleSort="handleSort"
          >
            <template #do-column-value="{ scope }">
              <div class="__cus-table_do">
                <div class="__cus-table_do-green __hover" @click="onView(scope.row)">
                  <SvgIcon name="add" size="16"/>查看
                </div>
                <div class="__cus-table_do-blue __hover" @click="onEdit(scope.row)">
                  <SvgIcon name="edit" size="16"/>编辑
                </div>
<!--                <div class="__cus-table_do-green __hover">-->
<!--                  <SvgIcon name="publish" size="16"/>发布-->
<!--                </div>-->
                <div class="__cus-table_do-red __hover">
                  <SvgIcon name="del" size="16"/>删除
                </div>
              </div>
            </template>
          </CusTable>
        </template>
      </CusContent>
    </div>
    <DetailCom v-model:show="showDetail" :transfer="transfer"/>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import DetailCom from './detail.vue'

export default defineComponent({
  name: '',
  components: {
    DetailCom
  },
  setup(props, {emit}) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      //  加载中
      loading: false,
      //  查询分页参数
      queryPage: {
        pageNum: 1,
        pageSize: 10
      },
      //  查询结果
      queryResult: {
        total: 0,
        tableData: []
      },
      //  查询表单参数
      queryForm: <any>{},
      //  查询表单参数备份
      back_queryForm: {},
      //  查询表格排序
      querySort: {},
      //  表格表头
      tableHead: [
        {value: "p1", label: "标题", show: true},
        {value: "p1", label: "发布单位", show: true},
        {value: "p1", label: "发布人", show: true},
        {value: "p1", label: "发布时间", show: true},
        {value: "p1", label: "类型", show: true},
        {value: "p1", label: "状态", show: true},
        {value: "do", label: "操作", show: true, width: 260},
      ],
      showDetail: false,
      transfer: {}
    });
    const ref_cusTable = ref()
    //  获取字典
    const initDictionary = () => {
    }
    //  查询分页参数改变处理方法
    const handlePage = ({page, pageSize}: any) => {
      state.queryPage.pageNum = page
      state.queryPage.pageSize = pageSize
      handleSearch(page, pageSize)
    }
    //  查询排序参数改变处理方法
    const handleSort = ({key, value}: any) => {
      state.querySort = key ? {key: value} : {}
      handleSearch()
    }
    //  重置查询表单方法
    const handleReset = () => {
      state.queryForm = {}
      state.back_queryForm = state.queryForm
      handleSearch()
    }
    //  查询方法
    const handleSearch = (page = 1, pageSize = 10) => {
      //  添加分页参数
      const queryParams: any = {
        pageNum: page,
        pageSize: pageSize,
        sort: {},
        text: ''
      }
      //  添加排序参数
      for (const [k, v] of Object.entries(state.querySort)) {
        that.$util.isValue(v) ? (queryParams.sort[k] = v) : null;
      }
      //  添加表单参数
      for (const [k, v] of Object.entries(state.back_queryForm)) {
        that.$util.isValue(v) ? (queryParams[k] = v) : null;
      }
      //  添加复合查询参数
      state.loading = true

      // mock
      const arr: any = []
      for (let i = 0; i < 77; i++) {
        arr.push({
          p1: '阿三顶顶顶顶顶顶顶顶顶顶顶顶顶' + i,
          fileList: [
            { "url": "http://8.140.240.182:18085/profile/upload/2023/10/23/6b7bf3b4-592a-4e2f-ba92-11923671ce3b.doc", "name": "迁移案例.doc"},
          ],
        })
      }
      state.queryResult.tableData = arr
      state.queryResult.total = arr.length
      state.loading = false
      // that.$api.patrolBoatList(that.$util.formatGetParam(queryParams)).then((res: { code: number; rows: never[]; total: number; }) => {
      //   if (res.code === 200) {
      //     state.queryResult.tableData = res.rows
      //     state.queryResult.total = res.total
      //   }
      //   setTimeout(() => {
      //     state.loading = false
      //   }, 1000)
      // }).catch(() => {
      //   setTimeout(() => {
      //     state.loading = false
      //   }, 1000)
      // })
    }
    //  点击查询按钮后
    const onSearch = () => {
      ref_cusTable.value.resetFilter()
      state.back_queryForm = state.queryForm
      state.queryPage.pageNum = 1
      handleSearch()
    }
    const onAdd = () => {
      state.transfer = {
        method: 'add',
      }
      state.showDetail = true
    }
    const onEdit = (val) => {
      state.transfer = {
        method: 'edit',
        detail: val
      }
      state.showDetail = true
    }
    const onView = (val) => {
      state.transfer = {
        method: 'view',
        detail: val
      }
      state.showDetail = true
    }
    onMounted(() => {
      state.back_queryForm = JSON.parse(JSON.stringify(state.queryForm))
      initDictionary()
      handleSearch()
    })
    return {
      ref_cusTable,
      ...toRefs(state),
      handleSearch,
      handlePage,
      handleSort,
      handleReset,
      onSearch,
      onAdd,
      onEdit,
      onView,
    }
  },
})
</script>

<style scoped lang="scss">
</style>