295 lines
11 KiB
Vue
295 lines
11 KiB
Vue
<template>
|
|
<div class="main">
|
|
<div class="main-from common-box">
|
|
<el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="70px">
|
|
<el-row>
|
|
<el-col :span="8">
|
|
<el-form-item label="名称">
|
|
<el-input v-model="formInline.name" placeholder="请输入名称" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="编码">
|
|
<el-input v-model="formInline.codeNum" placeholder="请输入编码" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
<el-form-item>
|
|
<el-button type="primary" @click="unitPage">查询</el-button>
|
|
<el-button type="primary" @click="onSubmit">新增</el-button>
|
|
<el-button @click="onSubmit">启用</el-button>
|
|
<el-button @click="onSubmit">禁用</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
<div class="main-table common-box">
|
|
|
|
<div class="tab-left">
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
|
|
<div>
|
|
单位组
|
|
</div>
|
|
<div>
|
|
|
|
<el-button type="success" link
|
|
@click.prevent="addUnitGroup"
|
|
style="border-right: 1px #515a6e solid; border-radius: 0px; margin-right: 3px; padding: 0 3px;">新增</el-button>
|
|
<el-dropdown>
|
|
<span class="el-dropdown-link">
|
|
更多
|
|
<el-icon class="el-icon--right">
|
|
<arrow-down />
|
|
</el-icon>
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item>查看</el-dropdown-item>
|
|
<el-dropdown-item>修改</el-dropdown-item>
|
|
<el-dropdown-item>删除</el-dropdown-item>
|
|
<el-dropdown-item>刷新</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</div>
|
|
<div style="height: 100%;">
|
|
<vxe-table show-overflow height="100%" :data="data.unitGroup" :border=true
|
|
:tree-config="{ transform: true }" :scroll-y="{ gt: 20 }" @radio-change="radioChangeEvent">
|
|
<vxe-column type="radio" title="单选" width="80" fixed="left">
|
|
</vxe-column>
|
|
|
|
<vxe-column field="name" sortable title="名称" width=""></vxe-column>
|
|
|
|
<vxe-column title="状态" width="80" fixed="right" show-overflow>
|
|
<template #default="{ row }">
|
|
{{ row.isEnable ? '启用' : '关闭' }}
|
|
<!-- <vxe-button type="text" icon="vxe-icon-delete"></vxe-button> -->
|
|
</template>
|
|
</vxe-column>
|
|
</vxe-table>
|
|
</div>
|
|
</div>
|
|
<div class="tab">
|
|
<div>
|
|
<vxe-table show-overflow height="100%" :data="data.unit" :border=true
|
|
:tree-config="{ transform: true }" :scroll-y="{ gt: 20 }">
|
|
<vxe-column type="checkbox" width="60" fixed="left"></vxe-column>
|
|
|
|
<vxe-column field="codeNum" sortable title="编码" width=""></vxe-column>
|
|
<vxe-column field="name" sortable title="名称" width=""></vxe-column>
|
|
<vxe-column field="code" sortable title="代码" width=""></vxe-column>
|
|
|
|
<vxe-column sortable title="可用状态" width="">
|
|
<template #default="{ row }">
|
|
{{ row.isEnable ? '启用' : '关闭' }}
|
|
<!-- <vxe-button type="text" icon="vxe-icon-delete"></vxe-button> -->
|
|
</template>
|
|
</vxe-column>
|
|
<vxe-column field="rate" sortable title="换算率" width=""></vxe-column>
|
|
<vxe-column field="isBaseUnit" sortable title="作为基本单位" width="">
|
|
<template #default="{ row }">
|
|
{{ row.isBaseUnit ? '是' : '否' }}
|
|
<!-- <vxe-button type="text" icon="vxe-icon-delete"></vxe-button> -->
|
|
</template>
|
|
</vxe-column>
|
|
<vxe-column title="操作" width="200" fixed="right" show-overflow>
|
|
<template #default="{ row }">
|
|
<vxe-button type="text">查看</vxe-button>
|
|
<vxe-button type="text">修改</vxe-button>
|
|
<vxe-button type="text">删除</vxe-button>
|
|
<!-- <vxe-button type="text" icon="vxe-icon-delete"></vxe-button> -->
|
|
</template>
|
|
</vxe-column>
|
|
</vxe-table>
|
|
</div>
|
|
|
|
<div>
|
|
<vxe-pager v-model:current-page="pageVO1.currentPage" v-model:page-size="pageVO1.pageSize"
|
|
:total="pageVO1.total" />
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<el-dialog v-model="dialogTableVisible" :title="mTitle" width="850">
|
|
<el-form :inline="true" :model="unitFrom" class="demo-form-inline" label-width="70px">
|
|
<el-row>
|
|
|
|
<el-col :span="8">
|
|
<el-form-item label="名称">
|
|
<el-input v-model="unitFrom.name" placeholder="请输入名称" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="编码">
|
|
<el-input v-model="unitFrom.codeNum" placeholder="请输入编码" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="单位组">
|
|
<el-select v-model="unitFrom.groupUnitId" placeholder="请选择" clearable>
|
|
<el-option :label="item.name" :value="item.id" v-for="item, index in data.unitGroup"
|
|
:key="index" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
|
|
<el-col :span="8">
|
|
<el-form-item label="精度">
|
|
<el-input v-model="unitFrom.accuracy" placeholder="请输入" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="外部编码">
|
|
<el-input v-model="unitFrom.externalNumber" placeholder="请输入" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="备注">
|
|
<el-input v-model="unitFrom.remarks" placeholder="请输入" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-col :span="8">
|
|
<el-form-item label="是否启用">
|
|
<el-switch v-model="unitFrom.isEnable" inline-prompt active-text="启用" inactive-text="禁用" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-form>
|
|
<el-row style="display: flex; justify-content: space-around;">
|
|
<el-button style="width: 100px;" type="primary" @click="unitSubmit">提交</el-button>
|
|
<el-button style="width: 100px;" @click="dialogTableVisible = false">取消</el-button>
|
|
</el-row>
|
|
</el-dialog>
|
|
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, reactive, ref } from 'vue'
|
|
import { getAPI } from '/@/utils/axios-utils';
|
|
import { SysUnitApi, SysUnitGroupApi } from '/@/api-services/api';
|
|
import { AddSysUnitInput, SqlSugarPagedListSysUnitOutput, SysUnitGroupOutput, SysUnitInput } from '/@/api-services/models';
|
|
|
|
let data = reactive({
|
|
unit: [] as SqlSugarPagedListSysUnitOutput[],//单位数据
|
|
unitGroup: [] as SysUnitGroupOutput[],//单位组数据
|
|
|
|
});
|
|
|
|
//获取单位组数据
|
|
const unitGroup = async () => {
|
|
let res = await getAPI(SysUnitGroupApi).apiSysUnitGroupListGet();
|
|
data.unitGroup = res.data.result || [];
|
|
}
|
|
|
|
//单选
|
|
|
|
const radioChangeEvent = ({ row }) => {
|
|
unitPage({groupUnitId:row.id})
|
|
}
|
|
const formInline = reactive({} as SysUnitInput)
|
|
|
|
//获取单位数据
|
|
const unitPage = async (parameter = formInline) => {
|
|
|
|
let res = await getAPI(SysUnitApi).apiSysUnitPagePost({ page: 1, pageSize: 10, ...parameter,...formInline });
|
|
data.unit = res.data.result?.items as any;
|
|
pageVO1.total = res.data.result?.total!;
|
|
}
|
|
|
|
let mTitle = ref('新增');
|
|
let dialogTableVisible = ref(false);
|
|
|
|
let unitFrom = reactive({} as AddSysUnitInput)
|
|
|
|
//提交
|
|
let unitSubmit = async () => {
|
|
|
|
}
|
|
const onSubmit = () => {
|
|
console.log('submit!')
|
|
}
|
|
|
|
|
|
const tableData = ref([
|
|
|
|
])
|
|
|
|
const addUnitGroup=()=>{
|
|
console.log('tableData!')
|
|
}
|
|
|
|
const pageVO1 = reactive({
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
total: 0
|
|
})
|
|
|
|
onMounted(() => {
|
|
unitGroup()
|
|
unitPage()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.main {
|
|
padding: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.main-from {
|
|
// height: 300px;
|
|
width: 100%;
|
|
padding: 20px 10px;
|
|
|
|
.el-row {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.main-table {
|
|
margin-top: 20px;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
flex-grow: 1;
|
|
height: 0;
|
|
|
|
display: flex;
|
|
|
|
// flex-direction: column;
|
|
.tab-left {
|
|
width: 25%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-right: 20px;
|
|
// div:nth-child(1) {
|
|
// width: 50%;
|
|
// }
|
|
|
|
// div:nth-child(2) {
|
|
// width: 50%;
|
|
// }
|
|
}
|
|
|
|
.tab {
|
|
width: 80%;
|
|
flex: 1;
|
|
overflow: scroll;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
div:nth-child(1) {
|
|
flex: 1;
|
|
overflow: scroll;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |