<!DOCTYPE html>
|
<html lang="zh-cn">
|
|
<head>
|
<meta charset="utf-8">
|
<include file="common:title" />
|
<meta name="renderer" content="webkit">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
<include file="common:header" />
|
<include file="common:element-plus" />
|
<script>
|
$(function () {
|
$(".el-sub-menu__title").hover(function () {
|
$(this).addClass('hovercurrent');
|
}, function () {
|
$(this).removeClass('hovercurrent');
|
});
|
});
|
</script>
|
<style>
|
.gap-4 {
|
grid-gap: 1rem;
|
gap: 1rem;
|
}
|
|
.flex-wrap {
|
flex-wrap: wrap;
|
}
|
|
.flex {
|
display: flex;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div id="vue_item" v-cloak>
|
<el-container>
|
<el-aside class="el-menu-container" :width="el_aside_width">
|
<!-- 侧边菜单 -->
|
<include file="common:side_menu" />
|
</el-aside>
|
<el-container>
|
<el-header>
|
<include file="common:guide" one_word="{$guide.one.text}" two_word="{$guide.two.text}" />
|
</el-header>
|
<el-main>
|
<div class="flex flex-wrap gap-4">
|
|
<el-card style="width: 32%">
|
<template #header>
|
<div class="card-header">
|
<span>国家列表</span>
|
 
|
<el-link type="primary" class="header_add_btn" icon="CirclePlusFilled" :underline="false" href="javascript:void(0)"
|
@click="createCountry(-1)">添加</el-link>
|
</div>
|
</template>
|
|
<el-table :data="countryList" border style="width: 100%">
|
<el-table-column label="国家名称" prop="cate_name"></el-table-column>
|
<el-table-column label="国家代码" prop="cate_code" align="center" width="100"></el-table-column>
|
<el-table-column label="显示/隐藏" width="100" align="center">
|
<template #default="scope">
|
<el-switch v-model="scope.row.status" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ccc" :active-value="1"
|
:inactive-value="0" inline-prompt active-text="显示" inactive-text="隐藏" @change="updateShow(scope.row)" />
|
</template>
|
</el-table-column>
|
<el-table-column label="排序" prop="order_id" align="center" width="80"></el-table-column>
|
<el-table-column label="操作选项" width="200" align="center">
|
<template #default="scope">
|
<el-button size="small" type="primary" @click="createCountry(scope.$index)">编辑</el-button>
|
<el-button size="small" @click="setProvince(scope.$index)">管理省份</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
</el-card>
|
<el-card style="width: 32%">
|
<template #header>
|
<div class="card-header">
|
<span>省份列表</span>
|
<template v-if="countryList[currCountryIndex]">({{countryList[currCountryIndex].cate_name}})</template>
|
 
|
<el-link type="primary" class="header_add_btn" icon="CirclePlusFilled" :underline="false" href="javascript:void(0)"
|
@click="createProvince(-1)">添加</el-link>
|
</div>
|
</template>
|
|
<el-table :data="provinceList" border style="width: 100%">
|
<el-table-column label="省份名称" prop="cate_name">
|
<template #default="scope">
|
{{scope.row.cate_name}}
|
</template>
|
</el-table-column>
|
<el-table-column label="省份代码" prop="cate_code" align="center"></el-table-column>
|
<el-table-column label="显示/隐藏" width="100" align="center">
|
<template #default="scope">
|
<el-switch v-model="scope.row.status" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ccc" :active-value="1"
|
:inactive-value="0" inline-prompt active-text="显示" inactive-text="隐藏" @change="updateShow(scope.row)" />
|
</template>
|
</el-table-column>
|
<el-table-column label="排序" prop="order_id" align="center" width="80"></el-table-column>
|
<el-table-column label="操作选项" width="200" align="center">
|
<template #default="scope">
|
<el-button size="small" type="primary" @click="createProvince(scope.$index)">编辑</el-button>
|
<el-button size="small" @click="setCity(scope.$index)">管理城市</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
</el-card>
|
<el-card style="width: 32%">
|
<template #header>
|
<div class="card-header">
|
<span>城市列表</span>
|
<template v-if="countryList[currCountryIndex]">
|
({{countryList[currCountryIndex].cate_name}}
|
<template v-if="provinceList[currProvinceIndex]">/{{provinceList[currProvinceIndex].cate_name}})</template>
|
</template>
|
 
|
<el-link type="primary" class="header_add_btn" icon="CirclePlusFilled" :underline="false" href="javascript:void(0)"
|
@click="createCity(-1)">添加</el-link>
|
</div>
|
</template>
|
|
<el-table :data="cityList" border style="width: 100%">
|
<el-table-column label="城市名称" prop="cate_name"></el-table-column>
|
<el-table-column label="显示/隐藏" width="100" align="center">
|
<template #default="scope">
|
<el-switch v-model="scope.row.status" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ccc" :active-value="1"
|
:inactive-value="0" inline-prompt active-text="显示" inactive-text="隐藏" @change="updateShow(scope.row)" />
|
</template>
|
</el-table-column>
|
<el-table-column label="排序" prop="order_id" align="center" width="80"></el-table-column>
|
<el-table-column label="操作选项" width="200" align="center">
|
<template #default="scope">
|
<el-button size="small" type="primary" @click="createCity(scope.$index)">编辑</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
</el-card>
|
</div>
|
</el-main>
|
|
</el-container>
|
</el-container>
|
<!-- 添加国家 -->
|
|
<el-dialog :title="createCountryTitle" v-model="dialogVisible.country" :show-close="true" :before-close="countryCloseForm" width="600px">
|
<el-form :rules="countryRules" ref="countryForm" :model="countryForm" label-width="100px">
|
<el-form-item label="国家名称" prop="cate_name">
|
<el-input v-model="countryForm.cate_name" placeholder="请输入国家名称" style="width: 300px;"></el-input>
|
</el-form-item>
|
<el-form-item label="国家编码" prop="cate_code">
|
<el-input v-model="countryForm.cate_code" placeholder="请输入国家编码" style="width: 300px;"></el-input>
|
</el-form-item>
|
<el-form-item v-if="countryForm.id>0" label="排序值">
|
<el-input-number v-model="countryForm.order_id" class="mx-4" controls-position="right" />
|
</el-form-item>
|
<el-form-item>
|
|
<el-button type="primary" :loading="ifsubmit" @click="saveCountry">
|
<span v-if="!ifsubmit">保 存</span>
|
<span v-else>提 交 中...</span>
|
</el-button><el-button @click="countryCloseForm">取消</el-button>
|
</el-form-item>
|
</el-form>
|
</el-dialog>
|
<!-- 添加省份 -->
|
<el-dialog :title="createProvinceTitle" v-model="dialogVisible.province" :show-close="true" :before-close="provinceCloseForm" width="600px">
|
<el-form :rules="provinceRules" ref="provinceForm" :model="provinceForm" label-width="100px">
|
<el-form-item label="省份名称" prop="cate_name">
|
<el-input v-model="provinceForm.cate_name" placeholder="请输入省份名称" style="width: 300px;"></el-input>
|
</el-form-item>
|
<el-form-item label="省份编码" prop="cate_code">
|
<el-input v-model="provinceForm.cate_code" placeholder="请输入省份编码" style="width: 300px;"></el-input>
|
</el-form-item>
|
<el-form-item v-if="provinceForm.id>0" label="排序值">
|
<el-input-number v-model="provinceForm.order_id" class="mx-4" controls-position="right" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" :loading="ifsubmit" @click="saveProvince">
|
<span v-if="!ifsubmit">保 存</span>
|
<span v-else>提 交 中...</span>
|
</el-button><el-button @click="provinceCloseForm">取消</el-button>
|
</el-form-item>
|
</el-form>
|
</el-dialog>
|
<!-- 添加城市 -->
|
<el-dialog :title="createCityTitle" v-model="dialogVisible.city" :show-close="true" :before-close="cityCloseForm" width="600px">
|
<el-form :rules="cityRules" ref="cityForm" :model="cityForm" label-width="100px">
|
<el-form-item label="城市名称" prop="cate_name">
|
<el-input v-model="cityForm.cate_name" placeholder="请输入城市名称" style="width: 300px;"></el-input>
|
</el-form-item>
|
<el-form-item v-if="cityForm.id>0" label="排序值">
|
<el-input-number v-model="cityForm.order_id" class="mx-4" controls-position="right" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" :loading="ifsubmit" @click="saveCity">
|
<span v-if="!ifsubmit">保 存</span>
|
<span v-else>提 交 中...</span>
|
</el-button><el-button @click="cityCloseForm">取消</el-button>
|
</el-form-item>
|
</el-form>
|
</el-dialog>
|
</div>
|
</body>
|
<!-- 共用的方法 -->
|
<script src="/static/vue/mixin_admin.js"></script>
|
<script language="JavaScript">
|
const viewPath = '{$viewPath}';
|
</script>
|
<script src="/static/admin/js/country_code/index.js?v=<?php echo rand(1000,9999)?>"></script>
|
|
</html>
|
