big-model-web/src/views/demo/list/index.vue

<template>
  <div class="__normal-page">
    <div class="__normal-content">
      <CzrContent
        v-model:head="state.query.tableHead"
        @handleReset="onReset"
        @handleSearch="onSearch"
        v-model:full="state.query.isFull"
      >
        <template #fieldOut>
          <CzrForm>
            <CzrFormColumn
              filterSpan="1"
              label="参数"
              v-model:param="state.query.form.p1"
            />
            <CzrFormColumn
              filterSpan="1"
              label="参数"
              v-model:param="state.query.form.p1"
            />
            <CzrFormColumn
              filterSpan="1"
              label="参数"
              v-model:param="state.query.form.p1"
            />
            <CzrFormColumn
              filterSpan="1"
              label="参数"
              v-model:param="state.query.form.p1"
            />
            <CzrFormColumn
              filterSpan="1"
              label="参数"
              v-model:param="state.query.form.p1"
            />
            <CzrFormColumn
              filterSpan="1"
              label="参数"
              v-model:param="state.query.form.p1"
            />
            <CzrFormColumn
              filterSpan="1"
              label="参数"
              v-model:param="state.query.form.p1"
            />
            <CzrFormColumn
              filterSpan="2"
              label="创建时间"
              v-model:param="state.query.form.createTime"
              link="datetime"
              type="datetimerange"
            />

            <template v-if="state.query.expandValue">
              <CzrFormColumn
                filterSpan="1"
                label="参数"
                v-model:param="state.query.form.p1"
              />
              <CzrFormColumn
                filterSpan="1"
                label="参数"
                v-model:param="state.query.form.p1"
              />
              <CzrFormColumn
                filterSpan="1"
                label="参数"
                v-model:param="state.query.form.p1"
              />
              <CzrFormColumn
                filterSpan="1"
                label="参数"
                v-model:param="state.query.form.p1"
              />
              <CzrFormColumn
                filterSpan="1"
                label="参数"
                v-model:param="state.query.form.p1"
              />
              <CzrFormColumn
                filterSpan="1"
                label="参数"
                v-model:param="state.query.form.p1"
              />
              <CzrFormColumn
                filterSpan="1"
                label="参数"
                v-model:param="state.query.form.p1"
              />
              <CzrFormColumn
                filterSpan="1"
                label="参数"
                v-model:param="state.query.form.p1"
              />
              <CzrFormColumn
                filterSpan="1"
                label="参数"
                v-model:param="state.query.form.p1"
              />
              <CzrFormColumn
                filterSpan="1"
                label="参数"
                v-model:param="state.query.form.p1"
              />
            </template>
            <CzrSearchButtons
              v-model:expandValue="state.query.expandValue"
              @handleSearch="onSearch"
              @handleReset="onReset"
            />
          </CzrForm>
        </template>
        <template #buttons>
          <CzrButton type="add" @click="onAdd()" />
          <CzrButton type="export" @click="onExport" />
          <CzrButton type="del" @click="onDel()" />
        </template>
        <template #table>
          <CzrTable
            v-loading="state.query.loading"
            ref="ref_czrTable"
            :data="state.query.result.data"
            :head="state.query.tableHead"
            :total="state.query.result.total"
            :page="state.query.page.pageNum"
            :pageSize="state.query.page.pageSize"
            @handlePage="onPage"
            @handleSort="onSort"
            v-model:selected="state.query.selected"
            v-model:full="state.query.isFull"
          >
            <template #importAndExportType-column-value="{ scope }"> </template>
            <template #caozuo-column-value="{ scope }">
              <div class="__czr-table-operations">
                <CzrButton
                  type="table"
                  title="修改"
                  @click="onEdit(scope.row)"
                />
                <CzrButton type="table-del" @click="onDel(scope.row)" />
              </div>
            </template>
          </CzrTable>
        </template>
      </CzrContent>
    </div>
    <detailCom
      v-model:show="state.detail.show"
      :transfer="state.detail.transfer"
      @refresh="onSearch"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, getCurrentInstance, onMounted, reactive, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import detailCom from './detail.vue'

const { proxy } = getCurrentInstance()
const state: any = reactive({
  query: {
    loading: false,
    expandValue: false,
    page: {
      pageNum: 1,
      pageSize: 10,
    },
    tableHead: [
      {
        value: 'p1',
        label: '参数1',
        show: true,
        width: 120,
        fixed: 'left',
        popover: false,
      },
      { value: 'p2', label: '排序', show: true, sort: true },
      { value: 'p3', label: '参数3', show: true },
      { value: 'p4', label: '参数4', show: true },
      { value: 'p5', label: '参数5', show: true },
      { value: 'p6', label: '参数6', show: true },
      { value: 'p7', label: '参数7', show: true },
      { value: 'p8', label: '参数8', show: true },
      { value: 'p9', label: '参数9', show: true },
      { value: 'p10', label: '参数11', show: true },
      {
        value: 'caozuo',
        label: '操作',
        width: 200,
        show: true,
        fixed: 'right',
      },
    ],
    form: {},
    formReal: {},
    sort: {},
    result: {
      total: 0,
      data: [
        {
          p1: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
          p2: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
        },
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
      ],
    },
    selected: [],
    isFull: false,
  },
  detail: {
    show: false,
    transfer: {},
  },
})

const onSort = ({ key, value }) => {
  state.query.sort[key] = value
  onSearch()
}
const onPage = (pageNum, pageSize) => {
  state.query.page = {
    pageNum: pageNum,
    pageSize: pageSize,
  }
  const params = {
    pageNum: state.query.page.pageNum,
    pageSize: state.query.page.pageSize,
  }
  //  添加表单参数
  for (const [k, v] of Object.entries(state.query.formReal)) {
    if (k === 'createTime') {
      params['beginCreateTime'] = v[0]
      params['endCreateTime'] = v[1]
    } else if (proxy.$czrUtil.isValue(v)) {
      params[k] = v
    }
  }
  //  添加排序参数
  for (const [k, v] of Object.entries(state.query.sort)) {
  }
  // state.query.loading = true
  // api请求(params).then(res => {
  //   if (res.code == 200) {
  //     state.query.result.total = res.total
  //     state.query.result.data = res.rows
  //     state.query.loading = false
  //   } else {
  //     ElMessage.error(res.msg)
  //   }
  // }).catch(() => {
  //   state.query.loading = false
  // })
}
const onSearch = () => {
  state.query.selected = []
  state.query.formReal = JSON.parse(JSON.stringify(state.query.form))
  onPage(1, state.query.page.pageSize)
}
const onReset = () => {
  state.query.page = {
    pageNum: 1,
    pageSize: 10,
  }
  state.query.sort = {}
  state.query.form = {}
  onSearch()
}
const onAdd = () => {
  state.detail.transfer = {
    mode: 'add',
  }
  state.detail.show = true
}
const onEdit = (row) => {
  state.detail.transfer = {
    mode: 'edit',
    id: row.id,
  }
  state.detail.show = true
}
const onDel = (row = null) => {
  ElMessageBox.confirm(`请确认是否删除${row.name}?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  } as any)
    .then(() => {
      state.query.loading = true
      if ('成功') {
        ElMessage.success('删除成功！')
        onSearch()
      } else {
        ElMessage.error('错误信息')
      }
    })
    .catch(() => {
      state.query.loading = false
    })
}
const onExport = () => {}
const initDictionary = () => {}
onMounted(() => {
  initDictionary()
  onReset()
})
</script>

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