修改地区设置

src/lang/package/zh-cn/pages.js

@@ -103,6 +103,17 @@ export default {
     hrefMessage: '请输入路由',
     sortfMessage: '请输入排序'
   },
+  region: {
+    dialogTitle: '地区信息',
+    code: '编码',
+    name: '名称',
+    parent_code: '上级编码',
+    level: '等级',
+    is_use: '是否启用',
+    codeMessage: '请输入编码',
+    nameMessage: '请输入名称',
+    levelfMessage: '请输入等级'
+  },
   sector: {
     addDialogTitle: '新增行业',
     upDialogTitle: '修改行业',

src/store/api/system/region.js

@@ -13,6 +13,14 @@ export const RegionStore = defineStore('region', () => {
     const res = await axios.$get(`${url}`, cond)
     return res
   }
+  const list = async ({ skip = 0, limit = undefined, ...info } = {}) => {
+    let cond = {}
+    if (skip) cond.skip = skip
+    if (limit) cond.limit = limit
+    cond = { ...cond, ...info }
+    const res = await axios.$get(`${url}/list`, cond)
+    return res
+  }
   const fetch = async (payload) => {
     const res = await axios.$get(`${url}/${payload}`)
     return res
@@ -32,6 +40,7 @@ export const RegionStore = defineStore('region', () => {
   }
   return {
     query,
+    list,
     fetch,
     create,
     update,

src/views/system/region/index.vue

@@ -2,19 +2,188 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <el-col :span="24" class="one"> 地区设置 </el-col>
+        <el-col :span="24" style="text-align: right; padding: 10px">
+          <el-button type="primary" size="small" @click="toAdd()">{{ $t('common.create') }}</el-button>
+        </el-col>
+        <el-col :span="24">
+          <el-table :data="data" style="width: 100%" row-key="id" border lazy :load="load" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+            <el-table-column align="center" prop="code" :label="$t('pages.region.code')" />
+            <el-table-column align="center" prop="name" :label="$t('pages.region.name')" />
+            <el-table-column align="center" prop="parent_code" :label="$t('pages.region.parent_code')" />
+            <el-table-column align="center" :label="$t('pages.region.level')" prop="level">
+              <template #default="{ row }">{{ getLevel(row) }} </template>
+            </el-table-column>
+            <el-table-column align="center" :label="$t('pages.region.is_use')" prop="is_use">
+              <template #default="{ row }">
+                <el-tag v-if="row.is_use === '0'" type="success"> {{ getStatus(row) }} </el-tag>
+                <el-tag v-else type="info"> {{ getStatus(row) }} </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" :label="$t('common.opera')">
+              <template #default="{ row }">
+                <el-link :underline="false" type="primary" size="mini" @click="toUpdate(row)" style="margin-right: 10px">{{ $t('common.update') }}</el-link>
+                <el-link v-if="row.is_default !== '0'" :underline="false" type="danger" size="mini" @click="toDelete(row)">
+                  {{ $t('common.delete') }}
+                </el-link>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-col>
+        <el-col :span="24" style="display: flex; justify-content: flex-end; padding: 10px">
+          <el-pagination
+            background
+            layout="total, prev, pager, next"
+            :page-sizes="[10, 20, 50, 100, 200]"
+            :total="total"
+            :page-size="limit"
+            v-model:current-page="currentPage"
+            @current-change="changePage"
+            @size-change="sizeChange"
+          >
+          </el-pagination>
+        </el-col>
       </el-col>
     </el-row>
+    <el-dialog v-model="dialog" :title="$t('pages.region.dialogTitle')" :destroy-on-close="false" @close="toClose">
+      <custom-form v-model="form" :fields="formFields" :rules="rules" @save="toSave">
+        <template #is_use>
+          <el-radio v-for="i in isUseList" :key="i.id" :label="i.value">{{ i.label }}</el-radio>
+        </template>
+        <template #level>
+          <el-option v-for="i in levelList" :key="i.id" :label="i.label" :value="i.value"></el-option>
+        </template>
+      </custom-form>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
+const $checkRes = inject('$checkRes')
+const { t } = useI18n()
+import { get } from 'lodash'
+import { cloneDeep } from 'lodash-es'
+import { RegionStore } from '@/store/api/system/region'
+import { DictDataStore } from '@/store/api/system/dictData'
+const store = RegionStore()
+const dictDataStore = DictDataStore()
+const dialog = ref(false)
+const form = ref({})
+const data = ref([])
+let skip = 0
+let limit = inject('limit')
+const total = ref(0)
+const isUseList = ref([])
+const levelList = ref([])
 // 加载中
 const loading = ref(false)
+const formFields = [
+  { label: t('pages.region.code'), model: 'code' },
+  { label: t('pages.region.name'), model: 'name' },
+  { label: t('pages.region.parent_code'), model: 'parent_code' },
+  { label: t('pages.region.level'), model: 'level', type: 'select' },
+  { label: t('pages.region.is_use'), model: 'is_use', type: 'radio' }
+]
+const rules = reactive({
+  code: [{ required: true, message: t('pages.region.codeMessage'), trigger: 'blur' }],
+  name: [{ required: true, message: t('pages.region.nameMessage'), trigger: 'blur' }],
+  level: [{ required: true, message: t('pages.region.levelfMessage'), trigger: 'blur' }]
+})
 // 请求
 onMounted(async () => {
   loading.value = true
+  await searchOther()
+  await search()
   loading.value = false
 })
+const searchOther = async () => {
+  let result
+  // 是否使用
+  result = await dictDataStore.query({ code: 'isUse', is_use: '0' })
+  if ($checkRes(result)) isUseList.value = result.data
+  // 地区等级
+  result = await dictDataStore.query({ code: 'regionLevel', is_use: '0' })
+  if ($checkRes(result)) levelList.value = result.data
+}
+const search = async (query = { skip, limit }) => {
+  skip = query.skip
+  limit = query.limit
+  const info = { skip: query.skip, limit: query.limit, level: 'province', code: '22' }
+  const res = await store.list(info)
+  if (res.errcode == '0') {
+    data.value = res.data
+    total.value = res.total
+  }
+}
+const getLevel = (row) => {
+  let word = ''
+  const r = levelList.value.find((f) => f.value === row.level)
+  if (r) word = r.label
+  return word
+}
+const toAdd = () => {
+  dialog.value = true
+  form.value = { is_use: '0' }
+}
+const toUpdate = (row) => {
+  form.value = cloneDeep(row)
+  dialog.value = true
+}
+const toDelete = async (row) => {
+  ElMessageBox.confirm(t('common.delete_confirm'), t('common.warning'), {
+    confirmButtonText: t('common.confirm'),
+    cancelButtonText: t('common.cancel'),
+    type: 'warning'
+  }).then(async () => {
+    const res = await store.del(row.id)
+    if ($checkRes(res, true)) {
+      search()
+    }
+  })
+}
+const toClose = () => {
+  form.value = {}
+  dialog.value = false
+}
+const load = (row, treeNode, resolve) => {
+  setTimeout(async () => {
+    let level = get(row, 'level')
+    if (get(row, 'level') === 'province') level = 'city'
+    else if (get(row, 'level') === 'city') level = 'area'
+    else if (get(row, 'level') === 'area') level = 'street'
+    const info = { level, parent_code: get(row, 'code') }
+    const res = await store.list(info)
+    if (res.errcode == '0') resolve(res.data)
+  }, 2000)
+}
+const getStatus = (row) => {
+  let word = ''
+  switch (row.is_use) {
+    case '0':
+      word = t('common.is_use_abled')
+      break
+    case '1':
+      word = t('common.is_use_disabled')
+      break
+
+    default:
+      break
+  }
+  return word
+}
+const toSave = async () => {
+  const data = cloneDeep(form.value)
+  let res
+  if (get(data, 'id')) res = await store.update(data)
+  else res = await store.create(data)
+  if ($checkRes(res, true)) {
+    search({ skip, limit })
+    toClose()
+  }
+}
+const currentPage = ref(1)
+// 分页
+const changePage = (page = currentPage.value) => {
+  search({ skip: (page - 1) * limit, limit: limit })
+}
 </script>
 <style scoped lang="scss"></style>