<script setup lang="ts">
|
import {ref, computed, onMounted, reactive} from "vue";
|
import { showConfirmDialog } from 'vant';
|
import {useRouter} from "vue-router";
|
import {ipcApiRoute} from '@/api';
|
import {ipc} from '@/utils/ipcRenderer';
|
|
const router = useRouter();
|
|
|
const goBack = () => {
|
router.back(); // 或者使用 router.go(-1);
|
};
|
|
// 操作 新增 修改 删除
|
const operation = ref("");
|
|
const value1 = ref("100");
|
const activeId = ref(null);
|
const activeIndex = ref(0);
|
|
const showNoti = ref(false);
|
const notiType = ref("danger");
|
const notiMessage = ref("");
|
|
const showAdd = ref(false);
|
const addType = ref("2");
|
// 新增或更新粮食大类名称
|
const addGroupName = ref("");
|
// 新增或更新粮食名称
|
const addGrainName = ref("");
|
//当前选择粮食
|
const selectGrain = ref(null)
|
|
|
const selectGroup = ref("");
|
const showSelectGroup = ref(false);
|
const groupValue = ref([]);
|
const customFieldName = {
|
text: "text",
|
value: "id",
|
children: "children"
|
};
|
const groupColumns = [
|
{text: "杭州", id: "Hangzhou"},
|
{text: "宁波", id: "Ningbo"},
|
{text: "温州", id: "Wenzhou"},
|
{text: "绍兴", id: "Shaoxing"},
|
{text: "湖州", id: "Huzhou"}
|
];
|
const onGroupConfirm = ({selectedValues, selectedOptions}) => {
|
selectGroup.value = selectedOptions[0]?.text;
|
groupValue.value = selectedValues;
|
showSelectGroup.value = false;
|
// console.error(selectedValues, selectedOptions);
|
};
|
|
function typeChange(name) {
|
console.error(name);
|
}
|
|
|
const grainList = reactive(
|
[
|
{
|
id: 1,
|
text: "粮食",
|
children: [
|
// { text: "大米1", id: 1 },
|
// { text: "小麦2", id: 2 },
|
// { text: "玉米3", id: 3 }
|
]
|
}
|
]
|
)
|
|
//
|
const groupList = computed(() => grainList[0].children.filter(item => item.flag === 1));
|
|
function onSubmit() {
|
}
|
|
const handleSubmit = action => {
|
if (action === "confirm") {
|
// 确认类型，执行保存
|
// 添加的类别
|
if (addType.value === "1") {
|
if (addGroupName.value === "") {
|
showMessage("danger", "添加类别名称不能为空!");
|
return false;
|
} else {
|
return true;
|
}
|
//添加的粮食
|
} else if (addType.value === "2") {
|
if (selectGroup.value === "") {
|
showMessage("danger", "粮食大类不能为空!");
|
return false;
|
}
|
if (addGrainName.value === "") {
|
showMessage("danger", "粮食名称不能为空!");
|
return false;
|
}
|
if(operation.value === "add"){
|
handleAddGrain()
|
}
|
else if(operation.value === "update"){
|
handleUpdateGrain()
|
}
|
|
|
|
}
|
return false;
|
}
|
// 允许其他操作（如取消按钮）关闭
|
return true;
|
};
|
|
|
function showMessage(type, message) {
|
if (showNoti.value) return false;
|
showNoti.value = true;
|
notiType.value = type;
|
notiMessage.value = message;
|
setTimeout(() => {
|
showNoti.value = false;
|
}, 2000);
|
}
|
function resetGrainForm() {
|
addGroupName.value = "";
|
addGrainName.value = "";
|
selectGroup.value = "";
|
}
|
|
function handleAddClick() {
|
resetGrainForm();
|
showAdd.value = !showAdd.value;
|
operation.value = 'add';
|
}
|
function handleUpdateClick() {
|
resetGrainForm();
|
selectGrain.value = null;
|
//当前修改粮食
|
selectGrain.value = grainList[0].children.find(item => item.id === activeId.value);
|
if(!selectGrain.value.id){
|
showMessage("danger", "粮食大类数据异常！");
|
return false
|
}
|
|
if(selectGrain.value?.flag === 1){
|
showMessage("danger", "粮食大类不能修改！");
|
return false
|
}
|
// 查找粮食大类 -> 父类
|
const parent = groupList.value.find(item => item.flag === 1 && item.code === selectGrain.value?.code);
|
// 父类名称
|
selectGroup.value = parent?.text;
|
// 当前粮食名称
|
addGrainName.value = selectGrain.value?.text;
|
|
showAdd.value = !showAdd.value;
|
operation.value = 'update';
|
|
}
|
|
const beforeClose = (action: string): Promise<boolean> => {
|
return new Promise((resolve) => {
|
// resolve(action === 'confirm');
|
if(action === 'confirm'){
|
handleDelGrain(selectGrain.value.id,resolve)
|
} else {
|
resolve(true);
|
}
|
});
|
};
|
function handleDelClick(){
|
selectGrain.value = null;
|
selectGrain.value = grainList[0].children.find(item => item.id === activeId.value);
|
if(selectGrain.value?.flag === 1){
|
showMessage("danger", "粮食大类不能删除！");
|
return false
|
}
|
showConfirmDialog({
|
title: '提示',
|
message:
|
'确认删除',
|
beforeClose,
|
});
|
}
|
|
onMounted(() => {
|
initData()
|
})
|
|
// 后端接口操作
|
function initData() {
|
// 数据库中查询基础粮食数据（此部分数据无法修改、删除）
|
ipc.invoke(ipcApiRoute.grain.queryGrainAll).then((res: any) => {
|
if (res && Array.isArray(res)) {
|
// 使用响应式方法修改数组
|
grainList[0].children.splice(0, grainList[0].children.length, ...res.map(item => ({
|
text: item.name,
|
id: item.id,
|
code: item.code,
|
no: item.no,
|
flag:item.flag
|
})));
|
activeId.value = res[0].id;
|
}
|
})
|
}
|
|
function handleAddGrain() {
|
// 粮食大类
|
const wheat =groupList.value.find(item => item.text === selectGroup.value)
|
if(!wheat){
|
showMessage("danger", "粮食大类查询错误！");
|
return false;
|
}
|
const addGrain = {
|
code:wheat.code,
|
no:wheat.no,
|
name:addGrainName.value,
|
flag:0
|
}
|
ipc.invoke(ipcApiRoute.sqlitedb.getMax, {tableName:"grain",columnName:"no"}).then((res: number) => {
|
// 查找最大no
|
addGrain.no = res ? (res + 1) : 1;
|
ipc.invoke(ipcApiRoute.grain.addGrain,addGrain).then((res: number) => {
|
if(res > 0){
|
showMessage("success", "添加成功！");
|
initData();
|
showAdd.value = false;
|
}else {
|
showMessage("danger", "添加失败！");
|
}
|
|
})
|
})
|
|
|
}
|
|
function handleUpdateGrain(){
|
const updateGrain = {
|
id:selectGrain.value?.id,
|
code:selectGrain.value?.code,
|
no:selectGrain.value?.no,
|
name:addGrainName.value,
|
flag:0
|
}
|
|
ipc.invoke(ipcApiRoute.grain.updateGrain,updateGrain).then((res: number) => {
|
if(res > 0){
|
showMessage("success", "更新成功！");
|
initData();
|
showAdd.value = false;
|
}else {
|
showMessage("danger", "更新失败！");
|
}
|
|
})
|
}
|
|
function handleDelGrain(id:number,resolve:any){
|
ipc.invoke(ipcApiRoute.grain.delGrain, {id}).then((res: number) => {
|
if(res > 0){
|
showMessage("success", "删除成功！");
|
initData();
|
showAdd.value = false;
|
resolve(true);
|
}else {
|
showMessage("danger", "删除失败！");
|
}
|
|
})
|
}
|
|
</script>
|
|
<template>
|
<div class="app">
|
<div class="title-box">
|
<van-nav-bar
|
title="调整截距"
|
left-text="返回"
|
left-arrow
|
right-text="设备状态-[正常]"
|
@click-left="goBack"
|
/>
|
</div>
|
|
<van-divider/>
|
<div class="content-box">
|
<div class="content-info">
|
<div class="check-box">
|
<div class="statu-box">
|
<div class="label-box">计时器</div>
|
<div class="info-box">
|
<div class="ml-[-10px]">
|
<flop-time-mini/>
|
</div>
|
<div/>
|
<div/>
|
</div>
|
</div>
|
<div class="test-box">
|
<div class="flex justify-center items-center">仪器含水率(%)</div>
|
<div>
|
<div>
|
<van-field v-model="value1" class="w-[40px]" readonly/>
|
</div>
|
<div>
|
<van-button icon="search" type="primary" class="w-[100px]"
|
>检测1
|
</van-button>
|
</div>
|
</div>
|
<div>
|
<div>
|
<van-field v-model="value1" class="w-[40px]" readonly/>
|
</div>
|
<div>
|
<van-button icon="search" type="primary" class="w-[100px]"
|
>检测1
|
</van-button>
|
</div>
|
</div>
|
<div>
|
<div>
|
<van-field v-model="value1" class="w-[40px]" readonly/>
|
</div>
|
<div>
|
<van-button icon="search" type="primary" class="w-[100px]"
|
>检测1
|
</van-button>
|
</div>
|
</div>
|
</div>
|
<div class="water-box">
|
<div class="label-box">人工含水率(%)</div>
|
<div class="input-box">
|
<div>
|
<van-field v-model="value1" class="write-field"/>
|
</div>
|
</div>
|
</div>
|
|
<div class="adjust-box">
|
<div class="label-box">当前截距(%)</div>
|
<div class="input-box">
|
<div>
|
<van-field v-model="value1" class="write-field"/>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="seeds-box">
|
<van-tree-select
|
v-model:active-id="activeId"
|
v-model:main-active-index="activeIndex"
|
:items="grainList"
|
/>
|
<div class="w-full flex justify-around">
|
<van-button
|
icon="plus"
|
type="primary"
|
@click.stop="handleAddClick"
|
/>
|
<van-button icon="edit" type="primary" @click.stop="handleUpdateClick"/>
|
<van-button icon="delete-o" type="primary" @click.stop="handleDelClick"/>
|
</div>
|
</div>
|
</div>
|
<div class="content-submit">
|
<van-button type="primary" icon="clock-o" color="var(--base-green)"
|
>计算
|
</van-button>
|
<div class="w-[60px]"/>
|
<van-button type="primary" icon="records-o" color="var(--base-green)"
|
>保存
|
</van-button>
|
</div>
|
</div>
|
|
<van-dialog
|
v-model:show="showAdd"
|
:title="operation === 'add' ? '新增' : '修改' "
|
show-cancel-button
|
:before-close="handleSubmit"
|
>
|
<div>
|
<van-form class="w-[100%]" @submit="onSubmit">
|
<van-field class="dia-inp" name="radio" label="类型">
|
<template #input>
|
<van-radio-group
|
v-model="addType"
|
direction="horizontal"
|
@change="typeChange"
|
>
|
<!-- <van-radio name="1">类别</van-radio>-->
|
<van-radio name="2">粮食</van-radio>
|
</van-radio-group>
|
</template>
|
</van-field>
|
|
<van-field
|
v-if="addType === '2'"
|
v-model="selectGroup"
|
class="dia-inp dia-picker"
|
is-link
|
readonly
|
name="picker"
|
label="粮食大类"
|
placeholder="点击选择粮食大类"
|
@click="operation !== 'update' && (showSelectGroup = true)"
|
/>
|
<van-popup
|
v-model:show="showSelectGroup"
|
destroy-on-close
|
position="bottom"
|
>
|
<van-picker
|
:columns="groupList"
|
:model-value="groupValue"
|
:columns-field-names="customFieldName"
|
@confirm="onGroupConfirm"
|
@cancel="showSelectGroup = false"
|
/>
|
</van-popup>
|
|
<van-field
|
v-if="addType === '1'"
|
v-model="addGroupName"
|
class="dia-inp"
|
name="addGroupName"
|
label="类别名称"
|
placeholder="类别名称"
|
:rules="[{ required: true, message: '请填写类别名称' }]"
|
/>
|
<van-field
|
v-if="addType === '2'"
|
v-model="addGrainName"
|
class="dia-inp"
|
name="addGrantName"
|
label="粮食名称"
|
placeholder="粮食名称"
|
:rules="[{ required: true, message: '请填写粮食名称' }]"
|
/>
|
</van-form>
|
</div>
|
</van-dialog>
|
|
<van-notify v-model:show="showNoti" :type="notiType">
|
<van-icon name="bell" style="margin-right: 4px"/>
|
<span>{{ notiMessage }}</span>
|
</van-notify>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.app {
|
width: 100vw;
|
height: 548px;
|
|
.title-box {
|
height: 60px;
|
align-items: center;
|
background: white;
|
margin: 10px 10px 0 10px;
|
border-radius: 10px;
|
overflow: hidden;
|
}
|
|
.content-box {
|
width: 100vw;
|
|
.content-info {
|
height: 400px;
|
display: flex;
|
|
.check-box {
|
font-size: 18px;
|
flex: 1;
|
margin: 10px;
|
background: white;
|
border-radius: 10px;
|
|
.statu-box {
|
height: 68px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.label-box {
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.info-box {
|
flex: 3;
|
display: flex;
|
|
div {
|
flex: 1;
|
}
|
}
|
}
|
|
.test-box {
|
height: 120px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
div {
|
flex: 1;
|
}
|
}
|
|
.water-box,
|
.adjust-box {
|
margin-top: 10px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.label-box {
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.input-box {
|
flex: 3;
|
}
|
}
|
}
|
|
.seeds-box {
|
width: 300px;
|
margin: 10px 10px 10px 0;
|
background: white;
|
border-radius: 10px;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
padding: 10px;
|
}
|
}
|
|
.content-submit {
|
height: 80px;
|
margin-top: 10px;
|
display: flex;
|
justify-content: center;
|
}
|
}
|
}
|
|
:deep(.van-cell) {
|
padding: 0;
|
}
|
|
:deep(.van-field__control) {
|
width: 100px;
|
background: #e5e5e5;
|
border-radius: 5px;
|
height: 40px;
|
padding-left: 6px;
|
box-sizing: border-box;
|
margin: 6px 0;
|
}
|
|
.write-field {
|
:deep(.van-field__control) {
|
width: 474px;
|
background: var(--base-green);
|
color: white;
|
border-radius: 5px;
|
height: 40px;
|
padding-left: 6px;
|
box-sizing: border-box;
|
margin: 6px 0;
|
}
|
}
|
|
:deep(.van-nav-bar__text) {
|
font-size: 20px;
|
}
|
|
:deep(.van-tree-select) {
|
height: 300px !important;
|
}
|
|
:deep(.van-dialog) {
|
width: 400px !important;
|
}
|
|
.dia-inp {
|
:deep(.van-field__label) {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
:deep(.van-field__body) {
|
width: 200px !important;
|
}
|
|
:deep(.van-field__control) {
|
width: 200px !important;
|
background: white !important;
|
}
|
}
|
|
.dia-picker {
|
:deep(.van-badge__wrapper) {
|
margin-top: 14px !important;
|
margin-right: 14px !important;
|
}
|
}
|
</style>
|
