|
@@ -0,0 +1,352 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <HcCard>
|
|
|
+ <template #header>
|
|
|
+ <div class="w-48">
|
|
|
+ <el-input v-model="searchForm.queryValue1" clearable placeholder="请输入字典名称进行查询" size="large"/>
|
|
|
+ </div>
|
|
|
+ <div class="w-48 ml-2">
|
|
|
+ <el-input v-model="searchForm.queryValue2" clearable placeholder="请输入字典编号进行查询" size="large"/>
|
|
|
+ </div>
|
|
|
+ <div class="ml-4">
|
|
|
+ <el-button type="primary" @click="searchClick" size="large">
|
|
|
+ <HcIcon name="search-2"/>
|
|
|
+ <span>搜索</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="ml-2">
|
|
|
+ <el-button size="large" @click="resetClick">
|
|
|
+ <HcIcon name="close-circle"/>
|
|
|
+ <span>重置</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #extra>
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" @click="addClick" size="large">
|
|
|
+ <HcIcon name="add-circle"/>
|
|
|
+ <span>新增</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="ml-2">
|
|
|
+ <el-button type="primary" @click="batcheditClick" size="large">
|
|
|
+ <HcIcon name="delete-bin-2"/>
|
|
|
+ <span>删除</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <HcTable :column="tableColumn" :datas="tableData" isCheck @selection-change="tableSelectionChange">
|
|
|
+ <template #name="{row}">{{ row['name'] }}</template>
|
|
|
+ <template #text="{row}">{{ row['text'] }}</template>
|
|
|
+ <template #color="{row}">{{ row['color'] }}</template>
|
|
|
+ <template #action="{row, index}">
|
|
|
+ <el-button size="small" type="primary" @click="eidtModal">编辑</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="delModal">删除</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="configModalclick">字典配置</el-button>
|
|
|
+
|
|
|
+ </template>
|
|
|
+ </HcTable>
|
|
|
+ <template #action>
|
|
|
+ <HcPages :pages="searchForm" @change="pageChange"></HcPages>
|
|
|
+ </template>
|
|
|
+ <!-- 新增编辑字典 -->
|
|
|
+ <HcDialog bgColor="#ffffff" isToBody :show="codeModal" :title="codeModalTitle" @close="codeModalClose" widths="62rem" >
|
|
|
+ <el-form label-position="left" label-width="auto" :model="formcode" :rules="formUserRules" size="large">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="字典编号:" prop="code">
|
|
|
+ <el-input v-model="formcode.code"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="字典名称:" prop="name">
|
|
|
+ <el-input v-model="formcode.name"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" v-if="isConfigedit">
|
|
|
+ <el-form-item label="上级字典:" prop="parent">
|
|
|
+ <el-select v-model="formcode.parent" class="m-2" placeholder="请选择" size="large" style="width: 100%;">
|
|
|
+ <el-option
|
|
|
+ v-for="item in parentoptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="字典排序:" prop="sort">
|
|
|
+ <el-input-number
|
|
|
+ v-model="formcode.sort"
|
|
|
+ controls-position="right"
|
|
|
+ size="large"
|
|
|
+ @change="handleSortChange"
|
|
|
+ style="width: 100%;"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="封存:" prop="isstorage">
|
|
|
+ <el-switch
|
|
|
+ v-model="formcode.isstorage"
|
|
|
+ size="large"
|
|
|
+ active-text="是"
|
|
|
+ inactive-text="否"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="字典备注:">
|
|
|
+ <el-input v-model="formcode.price"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ </HcDialog>
|
|
|
+ <!-- 字典配置 -->
|
|
|
+ <HcDialog bgColor="#ffffff" isToBody isTable isRowFooter :loading="configModalLoading" :show="configModal" title="[保管期限]字典配置" widths="62rem" @close="closeConfigClick">
|
|
|
+ <template #header>
|
|
|
+ <div class="header-box">
|
|
|
+ <div class="w-48">
|
|
|
+ <el-input v-model="configsearchForm.queryValue1" clearable placeholder="请输入字典名称进行查询" size="large"/>
|
|
|
+ </div>
|
|
|
+ <div class="w-48 ml-2">
|
|
|
+ <el-input v-model="configsearchForm.queryValue2" clearable placeholder="请输入字典编号进行查询" size="large"/>
|
|
|
+ </div>
|
|
|
+ <div class="ml-4">
|
|
|
+ <el-button type="primary" @click="configsearchClick" size="large">
|
|
|
+ <HcIcon name="search-2"/>
|
|
|
+ <span>搜索</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="ml-2">
|
|
|
+ <el-button size="large" @click="configresetClick">
|
|
|
+ <HcIcon name="close-circle"/>
|
|
|
+ <span>重置</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="ml-36">
|
|
|
+ <el-button type="primary" @click="addClick" size="large">
|
|
|
+ <HcIcon name="add-circle"/>
|
|
|
+ <span>新增</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="ml-2">
|
|
|
+ <el-button type="primary" @click="batcheditClick" size="large">
|
|
|
+ <HcIcon name="delete-bin-2"/>
|
|
|
+ <span>删除</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <HcTable :column="configtableColumn" :datas="configtableData" isCheck @selection-change="configtableSelectionChange">
|
|
|
+ <template #name="{row}">{{ row['name'] }}</template>
|
|
|
+ <template #text="{row}">{{ row['text'] }}</template>
|
|
|
+ <template #color="{row}">{{ row['color'] }}</template>
|
|
|
+ <template #action="{row, index}">
|
|
|
+ <el-button size="small" type="primary" @click="configeidtModal">编辑</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="configdelModal">删除</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="addchildrenclick">新增子项</el-button>
|
|
|
+
|
|
|
+ </template>
|
|
|
+ </HcTable>
|
|
|
+ <template #action>
|
|
|
+ <HcPages :pages="searchForm" @change="configpageChange"></HcPages>
|
|
|
+ </template>
|
|
|
+ </HcDialog>
|
|
|
+ </HcCard>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import {ref, watch} from 'vue'
|
|
|
+
|
|
|
+//搜索表单
|
|
|
+const searchForm = ref({
|
|
|
+ projectType: null, user: null, project: null,
|
|
|
+ current: 1, size: 20, total: 0
|
|
|
+})
|
|
|
+const getTableData=()=>{
|
|
|
+
|
|
|
+}
|
|
|
+//搜索
|
|
|
+const searchClick = () => {
|
|
|
+ searchForm.value.current = 1;
|
|
|
+ getTableData()
|
|
|
+}
|
|
|
+
|
|
|
+//重置搜索表单
|
|
|
+const resetClick = () => {
|
|
|
+ searchForm.value = {current: 1, size: 20, total: 0}
|
|
|
+}
|
|
|
+const addClick=()=>{
|
|
|
+ codeModal.value=true
|
|
|
+}
|
|
|
+const batcheditClick=()=>{
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+//分页被点击
|
|
|
+const pageChange = ({current, size}) => {
|
|
|
+ searchForm.value.current = current
|
|
|
+ searchForm.value.size = size
|
|
|
+}
|
|
|
+
|
|
|
+const tableColumn = [
|
|
|
+ {key: 'key1', name: '字典编号'},
|
|
|
+ {key: 'key2', name: '字典名称'},
|
|
|
+ {key: 'key3', name: '封存'},
|
|
|
+
|
|
|
+ {key: 'action', name: '操作', width:250}
|
|
|
+
|
|
|
+]
|
|
|
+const tableData = ref([
|
|
|
+ {key1: '名称1', key2: '文本1', key3: 'red'},
|
|
|
+ {key1: '名称1', key2: '文本1', key3: 'red'},
|
|
|
+ {key1: '名称1', key2: '文本1', key3: 'red'},
|
|
|
+])
|
|
|
+const tableCheckedKeys = ref([]);
|
|
|
+const tableSelectionChange = (rows) => {
|
|
|
+ tableCheckedKeys.value = rows
|
|
|
+ if (tableCheckedKeys.value.length > 1) {
|
|
|
+ window.$message.warning('只能选择一条数据')
|
|
|
+ }
|
|
|
+}
|
|
|
+const eidtModal=()=>{
|
|
|
+
|
|
|
+}
|
|
|
+const delModal=()=>{
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+const codeModal=ref(false)
|
|
|
+const codeModalTitle=ref('新增')
|
|
|
+const codeModalClose=()=>{
|
|
|
+ codeModal.value=false
|
|
|
+}
|
|
|
+const formcode=ref({})
|
|
|
+const formUserRules = {
|
|
|
+ code: {
|
|
|
+ required: true,
|
|
|
+ trigger: "blur"
|
|
|
+ },
|
|
|
+ name: {
|
|
|
+ required: true,
|
|
|
+ trigger: "blur"
|
|
|
+ },
|
|
|
+ sort: {
|
|
|
+ required: true,
|
|
|
+ trigger: "blur"
|
|
|
+ },
|
|
|
+ isstorage:{
|
|
|
+ required: true,
|
|
|
+ trigger: "blur"
|
|
|
+ }
|
|
|
+}
|
|
|
+const handleSortChange=()=>{
|
|
|
+ console.log(value)
|
|
|
+}
|
|
|
+//字典配置
|
|
|
+const isConfigedit=ref(false)
|
|
|
+const configModalLoading=ref(false)
|
|
|
+const configModal=ref(false)
|
|
|
+const configModalclick=()=>{
|
|
|
+ configModal.value=true
|
|
|
+ isConfigedit.value=true
|
|
|
+}
|
|
|
+const closeConfigClick=()=>{
|
|
|
+ configModal.value=false
|
|
|
+ isConfigedit.value=false
|
|
|
+}
|
|
|
+
|
|
|
+//搜索表单
|
|
|
+const configsearchForm = ref({
|
|
|
+ projectType: null, user: null, project: null,
|
|
|
+ current: 1, size: 20, total: 0
|
|
|
+})
|
|
|
+const configgetTableData=()=>{
|
|
|
+
|
|
|
+}
|
|
|
+//搜索
|
|
|
+const configsearchClick = () => {
|
|
|
+ configsearchForm.value.current = 1;
|
|
|
+ configgetTableData()
|
|
|
+}
|
|
|
+
|
|
|
+//重置搜索表单
|
|
|
+const configresetClick = () => {
|
|
|
+ configsearchForm.value = {current: 1, size: 20, total: 0}
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+//分页被点击
|
|
|
+const configpageChange = ({current, size}) => {
|
|
|
+ searchForm.value.current = current
|
|
|
+ searchForm.value.size = size
|
|
|
+}
|
|
|
+
|
|
|
+const configtableColumn = [
|
|
|
+ {key: 'key1', name: '字典编号'},
|
|
|
+ {key: 'key2', name: '字典名称'},
|
|
|
+ {key: 'key3', name: '封存'},
|
|
|
+
|
|
|
+ {key: 'action', name: '操作', width:250}
|
|
|
+
|
|
|
+]
|
|
|
+const configtableData = ref([
|
|
|
+ {key1: '名称1', key2: '文本1', key3: 'red'},
|
|
|
+ {key1: '名称1', key2: '文本1', key3: 'red'},
|
|
|
+ {key1: '名称1', key2: '文本1', key3: 'red'},
|
|
|
+])
|
|
|
+const configtableCheckedKeys = ref([]);
|
|
|
+const configtableSelectionChange = (rows) => {
|
|
|
+ configtableCheckedKeys.value = rows
|
|
|
+ if (configtableCheckedKeys.value.length > 1) {
|
|
|
+ window.$message.warning('只能选择一条数据')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const configeidtModal=()=>{
|
|
|
+
|
|
|
+}
|
|
|
+const configdelModal=()=>{
|
|
|
+
|
|
|
+}
|
|
|
+const addchildrenclick=()=>{
|
|
|
+
|
|
|
+}
|
|
|
+const parentoptions = [
|
|
|
+ {
|
|
|
+ value: 'Option1',
|
|
|
+ label: 'Option1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Option2',
|
|
|
+ label: 'Option2',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Option3',
|
|
|
+ label: 'Option3',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Option4',
|
|
|
+ label: 'Option4',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Option5',
|
|
|
+ label: 'Option5',
|
|
|
+ },
|
|
|
+]
|
|
|
+</script>
|
|
|
+<style lang='scss' scoped>
|
|
|
+.header-box{
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+</style>
|