hac/src/views/system/components/tab-other.vue

<!--  -->
<template>
   <HcCard>
    <template #header>
          <div class="w-48">
                <el-input v-model="searchForm.dictName" clearable placeholder="请输入字典名称进行查询" size="large"/>
            </div>
            <div class="w-48 ml-2">
                <el-input v-model="searchForm.code" 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="delModal" size="large" :disabled="tableCheckedKeys.length<1">
                    <HcIcon name="delete-bin-2"/>
                    <span>删除</span>
                </el-button>
        </div>
      </template>
      <HcTable :column="tableColumn" :datas="tableData" isCheck @selection-change="tableSelectionChange" :loading="tableLoaing">
            <template #action="{row, index}">
                <el-button size="small" type="primary" @click="eidtModal(row)">编辑</el-button>
                <el-button size="small" type="primary" @click="delModal(row)">删除</el-button>
                <el-button size="small" type="primary" @click="configModalclick(row)">字典配置</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"  @save="saveparentClick">
            <el-form label-position="left" label-width="auto" :model="formcode" :rules="formUserRules" size="large">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <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="dictName">
                            <el-input v-model="formcode.dictName"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="字典值:"  prop="dictValue">
                            <el-input v-model="formcode.dictValue"/>
                        </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  :show="configcodeModal" @close="configcodeModalClose"  widths="62rem" @save="savechilidClick" :title="configcodeModalTitle">
            <el-form label-position="left" label-width="auto" :model="configForm" :rules="formUserRules" size="large">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="字典编号:" prop="code">
                            <el-input v-model="configForm.code" disabled/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="字典名称:"  prop="dictName">
                            <el-input v-model="configForm.dictName"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="字典值:"  prop="dictValue">
                            <el-input v-model="configForm.dictValue"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="isConfigedit">
                        <el-form-item label="上级字典:"  prop="parentId">
                            <el-select v-model="configForm.parentId" class="m-2" placeholder="请选择" size="large" style="width: 100%;" disabled>
                                    <el-option
                                    v-for="item in tableData"
                                    :key="item.id"
                                    :label="item.dictName"
                                    :value="item.id"
                                    />
                             </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="字典排序:" prop="sort">
                            <el-input-number
                                v-model="configForm.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"  isTable isRowFooter :loading="configModalLoading" :show="configModal" title="字典配置" widths="62rem" @close="closeConfigClick">
            <template #header>
                <div class="w-30">
                        [{{ configItem?.dictName }}] 字典配置
                </div>
               <div class="header-box mt-2">
                    
                    <div class="w-48 ">
                            <el-input v-model="configsearchForm.dictName" clearable placeholder="请输入字典名称进行查询" size="large"/>
                    </div>
                    <div class="w-48 ml-2">
                            <el-input v-model="configsearchForm.code" 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-32">
                            <el-button type="primary" @click="addchildClick" size="large">
                                <HcIcon name="add-circle"/>
                                <span>新增</span>
                            </el-button>
                    </div>
                    <div class="ml-2">
                            <el-button type="primary" @click="configdelClick" size="large" :loading="configdelbtnloading" :disabled="configtableCheckedKeys.length<1">
                                <HcIcon name="delete-bin-2"/>
                                <span>删除</span>
                            </el-button>
                    </div>
               </div>
            </template>
      
           
        
            <HcTable :column="configtableColumn" :datas="configtableData" isCheck @selection-change="configtableSelectionChange" :loading="configTableloaing">
                <template #action="{row, index}">
                    <el-button size="small" type="primary" @click="configeidtModal(row)">编辑</el-button>
                    <el-button size="small" type="primary" @click="configdelClick(row)" :loading="configdelbtnloading">删除</el-button>
                
                    
                </template>
            </HcTable>
       
        </HcDialog>
   </HcCard>
</template>

<script setup>

import {onMounted, ref, watch} from "vue";
import {submitDictionary,removeDictionary,getParentList,getChildList} from '~api/system/parameter.js';
import {getArrValue,arrToId} from "js-fast-way"

const props = defineProps({
    cur: {
        type: [String,Number],
        default: ''
    },
    type:{
        type: [String,Number],
        default: ''
    }
})

const tabsKey = ref(props.cur)
const tabsType = ref(props.type)

//监听
watch(() => [
    props.cur,
    props.type,
], ([key,type]) => {
    tabsKey.value = key
    tabsType.value = type
   
})

onMounted(() => {
    getTableData()
   
   
})
//搜索表单
const searchForm = ref({
  
    current: 1, size: 20,total:0
})
//分页被点击
const pageChange = ({current, size}) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}
const tableLoaing=ref(false)
const getTableData=async()=>{
    tableLoaing.value=true
    const { error, code, data,msg } = await getParentList({
        current:searchForm.value.current,
        size:searchForm.value.size,
        type:tabsType.value,
        code:searchForm.value?.code||'',
        dictName:searchForm.value?.dictName||'',
       
    })
    tableLoaing.value=false
    if (!error && code === 200) {
        tableData.value = getArrValue(data['records'])
        searchForm.value.total=data['total']
      
    } 
    else {
        tableData.value =[]
        window.$message?.warning(msg)
    }
}
//搜索
const searchClick = () => {
    getTableData()
}

//重置搜索表单
const resetClick = () => {
    searchForm.value = {}
    getTableData()
   
}
const addClick=()=>{
    formcode.value={}
    codeModalTitle.value='新增'
  codeModal.value=true
}
//新增一级科目
const saveparentClick=async()=>{
    const { error, code, data,msg } = await submitDictionary({
        type:tabsType.value,
        dictName:formcode.value?.dictName,
        dictValue:formcode.value?.dictValue,
        code:formcode.value?.code,
        id:formcode.value?.id||null,
        sort:formcode.value?.sort||null,
    })
   
    if (!error && code === 200) {
        window.$message?.success(msg)
        codeModal.value=false
        getTableData()
    } 
    else {
        window.$message?.warning(msg)
    }
}
//新增二级科目
const configForm=ref({})
const savechilidClick=async()=>{
    const { error, code, data,msg } = await submitDictionary({
        type:configItem.value?.type,
        dictName:configForm.value?.dictName,
        dictValue:configForm.value?.dictValue,
        id:configForm.value?.id||null,
        code:configForm.value?.code,
        parentId:configItem.value.id,
        sort:configForm.value?.sort||null,
    })
    configcodeModal.value=false
    if (!error && code === 200) {
        window.$message?.success(msg)
      
        getChildListData()
    } 
    else {
        window.$message?.warning(msg)
    }
}
const batcheditClick=()=>{
  
}



const tableColumn = [
    {key: 'code', name: '字典编号'},
    {key: 'dictName', name: '字典名称'},
    {key: 'dictValue', name: '字典值'},

    {key: 'action', name: '操作', width:250}

]
const tableData = ref([])
const tableCheckedKeys = ref([]);
const tableSelectionChange = (rows) => {
    tableCheckedKeys.value = rows
  
}
const eidtModal=(row)=>{
    formcode.value=row
    codeModal.value=true
    codeModalTitle.value='编辑'
}
const delbtnloading=ref(false)
const delModal=(item)=>{
    const rows = tableCheckedKeys.value;
    
    const ids = arrToId(rows)
    delbtnloading.value=true
    window?.$messageBox?.alert('您确定要删除该信息吗? 一旦注销数据将彻底清除，请谨慎操作？', '删除提醒', {
            showCancelButton: true,
            confirmButtonText: '确认注销',
            cancelButtonText: '取消',
            type: 'warning',
            callback: async(action) => {
                if (action === 'confirm') {
                        const {error, code, msg} = await removeDictionary({
                            ids: ids||item.id,
                        })
                        delbtnloading.value=false
                        if (!error && code === 200) {
                            window?.$message?.success('删除成功')
                            getTableData()
                        } else {
                            window?.$message?.warning(msg)
                        }
                }
            }
        })
}

const codeModal=ref(false)
const configcodeModal=ref(false)
const codeModalTitle=ref('新增')
const configcodeModalTitle=ref('新增')
const codeModalClose=()=>{
   
    codeModal.value=false
}
const configcodeModalClose=()=>{
    configcodeModal.value=false
}
const formcode=ref({})
const formUserRules = {
    code: {
        required: true,
        trigger: "blur",
        message: "请输入字典编号"
    },
    dictName: {
        required: true,
        trigger: "blur",
        message: "请输入字典名称"
    },
    dictValue:{
        required: true,
        trigger: "blur",
        message: "请输入字典值"
    },
    sort: {
        required: true,
        trigger: "blur",
        message: "请输入字典排序"
    },
 
}
const handleSortChange=(value)=>{
    console.log(value)
}
//字典配置
const isConfigedit=ref(false)
const configModalLoading=ref(false)
const configModal=ref(false)
const configItem=ref({})
const configModalclick=(row)=>{
    configItem.value=row
    getChildListData()
    configModal.value=true
    isConfigedit.value=true
}
//获取二级科目
const configTableloaing=ref(false)
const getChildListData=async()=>{
    configTableloaing.value=true
    const { error, code, data,msg } = await getChildList({
        parentId: configItem.value.id,
        type:configItem.value.type,
        dictName:configsearchForm.value?.dictName,
        code:configsearchForm.value?.code
    })
    configTableloaing.value=false
    if (!error && code === 200) {
        configtableData.value=getArrValue(data)
        // tab.value = getArrValue(data['records'])
    } 
    else {
        configtableData.value=[]
        window.$message?.warning(msg)
    }
}
const closeConfigClick=()=>{
    configModal.value=false
    isConfigedit.value=false
}
//新增二级字典
const addchildClick=()=>{
    configcodeModal.value=true;
    configForm.value={}
    configForm.value.parentId=configItem.value.id
    configForm.value.code=configItem.value.code
    configcodeModalTitle.value='新增'

}
//搜索表单
const configsearchForm = ref({
    projectType: null, user: null, project: null,
    current: 1, size: 20, total: 0
})

//搜索
const configsearchClick = () => {
    getChildListData()
}

//重置搜索表单
const configresetClick = () => {
    configsearchForm.value = {}
    getChildListData()
}

const configtableColumn = [
    {key: 'code', name: '字典编号'},
    {key: 'dictName', name: '字典名称'},
    {key: 'dictValue', name: '字典值'},
    {key: 'action', name: '操作', width:250}

]

const configtableData = ref([])
const configtableCheckedKeys = ref([]);
const configtableSelectionChange = (rows) => {
    configtableCheckedKeys.value = rows
    if (configtableCheckedKeys.value.length > 1) {
        window.$message.warning('只能选择一条数据')
    }
}

const configeidtModal=(row)=>{
    configForm.value=row;
    configcodeModalTitle.value='编辑'
    configcodeModal.value=true
}
const configdelbtnloading=ref(false)
const configdelClick=(item)=>{
    const rows = configtableCheckedKeys.value;
    const ids = arrToId(rows)
    configdelbtnloading.value=true
    window?.$messageBox?.alert('您确定要删除该信息吗? 一旦注销数据将彻底清除，请谨慎操作？', '删除提醒', {
            showCancelButton: true,
            confirmButtonText: '确认注销',
            cancelButtonText: '取消',
            type: 'warning',
            callback: async(action) => {
                if (action === 'confirm') {
                        const {error, code, msg} = await removeDictionary({
                            ids: ids||item.id,
                        })
                        configdelbtnloading.value=false
                        if (!error && code === 200) {
                            window?.$message?.success('删除成功')
                            getChildListData()
                        } else {
                            window?.$message?.warning(msg)
                        }
                }
            }
        })
}

</script>
<style lang='scss' scoped>
.header-box{
    display: flex;
}
</style>