zkzx_admin/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight">
        <el-col :span="24" class="one">
          <component :is="search1" :form="searchForm" @onSubmit="toSearch" @toReset="toReset"></component>
        </el-col>
        <el-col :span="24" class="two">
          <cButton @toAdd="toAdd()"> </cButton>
        </el-col>
        <el-col :span="24" class="thr">
          <cTable :fields="fields" :opera="opera" :data="list" @query="search" :total="total" @edit="toEdit" @del="toDel" >
            <template #dict_type="{ item, row }">
              <template v-if="item.model === 'dict_type'">
                <el-link size="small" type="primary" @click="toType(row)">{{ getProps(row, item.model) }}</el-link>
              </template>
            </template>
          </cTable>
        </el-col>
      </el-col>
    </el-row>
    <cDialog :dialog="dialog" @handleClose="toClose">
      <template v-slot:info>
        <cForm v-if="dialog.type == '1'" :span="24" :fields="formFields" :form="form" :rules="rules" @save="onSubmit">
          <template #status>
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">停用</el-radio>
          </template>
        </cForm>
      </template>
    </cDialog>
  </div>
</template>
<script lang="ts" setup>
import _ from 'lodash'
import search1 from './parts/search-1.vue'
import type { FormRules } from 'element-plus'
import type { Ref } from 'vue'
import { ref, onMounted, getCurrentInstance, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { DictTypeStore } from '@common/src/stores/system/dictType' // 字典表
import type { IQueryResult } from '@/util/types.util'
const dictType = DictTypeStore()
const router = useRouter()
const { proxy } = getCurrentInstance() as any
// 列表数据
let list: Ref<any[]> = ref([])
// 总数
let total: Ref<number> = ref(0)
let skip = 0
let limit: number = proxy.$limit
// 列表
let fields: Ref<any[]> = ref([
  { label: '字典名称', model: 'dict_name' },
  { label: '字典类型', model: 'dict_type', custom: true },
  { label: '状态', model: 'status', format: (i) => (i == '0' ? '正常' : '停用') },
  { label: '备注', model: 'remark' }
])
// 操作
let opera: Ref<any[]> = ref([
  { label: '修改', method: 'edit' },
  { label: '删除', method: 'del', confirm: true, type: 'danger' }
])
const dialog: Ref<{ type: string; show: boolean; title: string }> = ref({ type: '1', show: false, title: '信息管理' })
let form: Ref<{}> = ref({})

// 表单
let formFields: Ref<any[]> = ref([
  { label: '字典名称', model: 'dict_name' },
  { label: '字典类型', model: 'dict_type' },
  { label: '状态', model: 'status', type: 'radio' },
  { label: '备注', model: 'remark', type: 'textarea' }
])
const rules = reactive<FormRules>({
  dict_type: [{ required: true, message: '请输入字典类型', trigger: 'blur' }],
  dict_label: [{ required: true, message: '请输入字典标签', trigger: 'blur' }],
  dict_value: [{ required: true, message: '请输入字典键值', trigger: 'blur' }],
  dict_sort: [{ required: true, message: '请输入显示排序', trigger: 'blur' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
})

// 查询数据
let searchForm: Ref<{}> = ref({})

onMounted(async () => {
  await search({ skip, limit })
})
// 查询
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 dictType.query(info)
  // if (res.errcode == 0) {
  //   list.value = res.data as any[]
  //   total.value = res.total
  // }
}
const toSearch = () => {
  search({ skip, limit })
}
const toReset = () => {
  searchForm.value = {}
  search({ skip, limit })
}
// 新增
const toAdd = () => {
  dialog.value = { title: '信息管理', show: true, type: '1' }
}
// 修改
const toEdit = async (data) => {
  // let res: IQueryResult = await dictType.fetch(data._id)
  // if (res.errcode == 0) {
  //   form.value = res.data as {}
  //   dialog.value = { title: '信息管理', show: true, type: '1' }
  // }
}
// 提交
const onSubmit = async (data) => {
  // let res: IQueryResult
  // if (data._id) res = await dictType.update(data)
  // else res = await dictType.create(data)
  // if (res.errcode == 0) {
  //   ElMessage({ type: `success`, message: `维护信息成功` })
  //   toClose()
  // }
}
// 删除
const toDel = async (data) => {
  // let res: IQueryResult = await dictType.del(data._id)
  // if (res.errcode == 0) {
  //   ElMessage({ type: `success`, message: `刪除信息成功` })
  //   search({ skip, limit })
  // }
}
// 字典类型跳转
const toType = (data) => {
  router.push({ path: '/system/dict/detail', query: { id: data._id, dict_type: data.dict_type } })
}
// 弹框关闭
const toClose = () => {
  form.value = {}
  searchForm.value = {}
  dialog.value = { title: '信息管理', show: false, type: '1' }
  search({ skip, limit })
}
const getProps = (data, prop) => {
  return _.get(data, prop)
}
</script>
<style lang="scss" scoped>
.main {
  .one {
    margin: 0 0 10px 0;
  }
  .two {
    margin: 0 0 10px 0;
  }
}
</style>