Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 fb92718d 作者: 宇宙超人
操作

设备模块

上级 a5aa2470
正在显示 包含 430 行增加 和 6 行删除
src/api/model/nongchang.ts
......@@ -7,7 +7,51 @@ enum Api {
agricultureModelsList = '/online/cgform/api/getData/7b2983df6ddf416aba68db8b0ab234ab', // 农业模型数据
baseManagementList = '/online/cgform/api/getData/e4e4e6c901254b60b1e7a005097999ec', // 基地管理数据
commonToolsList = '/online/cgform/api/getData/3a7fbb877f304b7d83935caa454859c4', // 常用工具数据
getFarmBaseList = '/farmbase/getFarmBaseList',
getFarmBaseList = '/farmbase/getFarmBaseList',
}
/**
* 删除设备
* @param id
* @returns
*/
export function delDevice(id) {
return otherHttp.post({
url: '/device/delete?id='+id,
})
}
/**
* 编辑设备
* @param params
* @returns
*/
export function editDevice(params = {}) {
return otherHttp.post({
url: '/device/edit',
params,
})
}
/**
* 添加设备
* @param params
* @returns
*/
export function addDevice(params = {}) {
return otherHttp.post({
url: '/device/add',
params,
})
}
/**
* 设备列表
* @param params
* @returns
*/
export function getDeviceList(params: any = {}) {
return otherHttp.get({
url: '/device/list',
params,
})
}
/**
* 农场基地管理-通过id查询
......@@ -27,7 +71,7 @@ export function getFarmbaseInfoById(params: any = {}) {
*/
export function delFarmbase(id) {
return otherHttp.delete({
url: '/farmbase/delete?id='+id,
url: '/farmbase/delete?id=' + id,
})
}
/**
......@@ -56,7 +100,7 @@ export function editFarmbase(params = {}) {
* 基地列表
* @param {any} params
* @return
*/
*/
export function getFarmbaseList(params: any = {}) {
return otherHttp.get({
url: '/farmbase/list',
......@@ -73,7 +117,7 @@ export function AllFarms(params = {}) {
* 获取基地数量
* @param params
* @return
*/
*/
export function getFarmBaseList(params = {}) {
return otherHttp.get({
url: Api.getFarmBaseList,
......
src/manifest.json
{
"name" : "数字农服",
"appid" : "__UNI__FD09823",
"appid" : "__UNI__A9A0BAC",
"description" : "数字农服 APP",
"versionName" : "1.0.9",
"versionCode" : 10009,
......
src/pages.json
......@@ -276,7 +276,8 @@
"text": "+ 添加基地",
"fontSrc": "/static/uni.ttf",
"color": "#fff",
"fontSize": "28rpx"
"fontSize": "28rpx",
"width":"auto"
}
]
}
......@@ -364,6 +365,30 @@
"style": {
"navigationBarTitleText": "添加基地"
}
},
{
"path": "pages/device/device",
"style": {
"navigationBarTitleText": "物联设备",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#5DB66F",
"navigationBarTextStyle": "white",
"backgroundColorBottom": "#F2F2F2",
"app-plus": {
"titleNView": {
"titleSize": "20",
"buttons": [
{
"text": "+ 添加设备",
"fontSrc": "/static/uni.ttf",
"color": "#fff",
"fontSize": "28rpx",
"width":"auto"
}
]
}
}
}
}
],
"easycom": {
......
src/pages/device/components/save-dialog.vue 0 → 100644
<template>
<u-modal :show="show" :title="dialogTitle" :showConfirmButton="false" :showCancelButton="false"
@close="handleClose" :closeOnClickOverlay="false">
<view class="dialog-content">
<u-form :model="formData" :rules="rules" ref="formRef" label-width="180rpx">
<!-- 设备基本信息 -->
<view class="section-title">设备基本信息</view>
<u-form-item label="设备名称" prop="deviceName" required>
<u-input v-model="formData.deviceName" placeholder="请输入设备名称" border="bottom" />
</u-form-item>
<u-form-item label="设备类型" prop="deviceType" required>
<u-input v-model="formData.deviceTypeText" placeholder="请选择设备类型" border="bottom"
@click="showDeviceTypePicker = true" />
</u-form-item>
<u-form-item label="设备标识" prop="deviceIdentifier" required>
<u-input v-model="formData.deviceIdentifier" placeholder="序列号/MAC地址等" border="bottom" />
</u-form-item>
<!-- 操作按钮 -->
<view class="dialog-buttons">
<u-button type="primary" @click="handleSubmit" :loading="loading" size="normal" class="submit-btn" color="var(--fui-color-success)">
{{ submitButtonText }}
</u-button>
<u-button @click="handleClose" size="normal" class="cancel-btn">取消</u-button>
</view>
</u-form>
<!-- 设备类型选择器 -->
<fui-picker :show="showDeviceTypePicker" :options="deviceTypeOptions" :layer="1" :linkage="true"
@change="handleDeviceTypeConfirm" @cancel="showDeviceTypePicker = false"></fui-picker>
</view>
</u-modal>
</template>
<script setup lang="ts">
import { ref, reactive, watch, computed } from 'vue'
import { useDictStore } from '@/store/modules/dict'
import * as NongchangAPI from '@/api/model/nongchang'
// 定义Props
interface Props {
show: boolean
editData?: any
}
const props = withDefaults(defineProps<Props>(), {
show: false,
editData: null
})
// 定义Emits
const emit = defineEmits<{
'update:show': [value: boolean]
'submit': [data: any]
'close': []
}>()
// 表单引用
const formRef = ref()
const loading = ref(false)
const showDeviceTypePicker = ref(false)
// 字典存储
const dictStore = useDictStore()
// 表单数据
const formData = reactive({
deviceName: '',
deviceType: '',
deviceTypeText: '',
deviceIdentifier: ''
})
// 设备类型选项 - 使用字典数据
const deviceTypeOptions = computed(() => {
return dictStore.getDictList['deviceType']?.map((item: any) => ({
value: item.value,
text: item.text
})) || []
})
// 设备类型选择器数据 (不再需要，因为fui-picker使用options属性)
// 计算属性
const dialogTitle = computed(() => {
return props.editData ? '编辑设备' : '添加设备'
})
const submitButtonText = computed(() => {
return props.editData ? '保存' : '确认'
})
// 表单验证规则
const rules = {
deviceName: [
{ required: true, message: '请输入设备名称', trigger: 'blur' },
{ min: 2, max: 50, message: '设备名称长度在2-50个字符之间', trigger: 'blur' }
],
deviceType: [
{ required: true, message: '请选择设备类型',type:'number', trigger: 'change' }
],
deviceIdentifier: [
{ required: true, message: '请输入设备唯一标识', trigger: 'blur' },
{ min: 6, max: 100, message: '设备标识长度在6-100个字符之间', trigger: 'blur' },
{
validator: (rule: any, value: any, callback: any) => {
if (!/^[a-zA-Z0-9\-_:]+$/.test(value)) {
callback(new Error('设备标识只能包含字母、数字、下划线、中划线和冒号'))
} else {
callback()
}
},
trigger: 'blur'
}
]
}
// 监听显示状态
watch(() => props.show, (newVal) => {
if (newVal && props.editData) {
// 编辑模式，填充数据
resetFormData()
loadEditData()
} else if (newVal) {
// 添加模式，重置表单
resetFormData()
}
})
// 重置表单数据
const resetFormData = () => {
formData.deviceName = ''
formData.deviceType = ''
formData.deviceTypeText = ''
formData.deviceIdentifier = ''
// 清除验证状态
if (formRef.value) {
formRef.value.resetFields()
}
}
// 加载编辑数据
const loadEditData = () => {
if (!props.editData) return
formData.deviceName = props.editData.deviceName || ''
formData.deviceType = props.editData.deviceType || ''
formData.deviceIdentifier = props.editData.deviceIdentifier || ''
// 设置设备类型文本
if (props.editData.deviceType) {
const typeOption = deviceTypeOptions.value.find(item => item.value === props.editData.deviceType)
if (typeOption) {
formData.deviceTypeText = typeOption.text
} else {
// 如果字典中没有找到对应的文本，使用原始数据中的文本
formData.deviceTypeText = props.editData.deviceType_dictText || ''
}
} else {
formData.deviceTypeText = ''
}
}
// 设备类型选择确认
const handleDeviceTypeConfirm = (e: any) => {
formData.deviceType = e.value
formData.deviceTypeText = e.text
showDeviceTypePicker.value = false
}
// 提交表单
const handleSubmit = async () => {
try {
console.log(formData)
// 先进行表单验证
const valid = await formRef.value.validate()
if (!valid) {
return
}
loading.value = true
// 准备提交数据
const submitData = {
...formData
}
// 根据 editData 判断是新增还是修改
let result
if (props.editData && props.editData.id) {
// 编辑设备，需要传递设备ID
result = await NongchangAPI.editDevice({
...submitData,
id: props.editData.id
})
console.log('修改设备数据:', submitData)
} else {
// 新增设备
result = await NongchangAPI.addDevice(submitData)
console.log('新增设备数据:', submitData)
}
uni.showToast({ title: '操作成功', icon: 'success' })
emit('update:show', false)
emit('submitSuccess')
} catch (error) {
console.log('提交失败:', error)
uni.showToast({
title: '操作失败',
icon: 'none',
duration: 2000
})
} finally {
loading.value = false
}
}
// 关闭弹窗
const handleClose = () => {
emit('update:show', false)
emit('close')
}
// 暴露方法给父组件
defineExpose({
resetFormData,
setLoading: (value: boolean) => {
loading.value = value
}
})
</script>
<style lang="scss" scoped>
.dialog-content {
padding: 10rpx 30rpx;
width: 90%;
max-height: 80vh;
overflow-y: auto;
}
.section-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
margin: 20rpx 0 30rpx 0;
padding-left: 20rpx;
border-left: 6rpx solid #5DB66F;
}
.dialog-buttons {
display: flex;
gap: 20rpx;
margin-top: 40rpx;
.submit-btn {
flex: 1;
::v-deep .u-button {
background-color: #5DB66F;
border-color: #5DB66F;
}
}
.cancel-btn {
flex: 1;
::v-deep .u-button {
background-color: #fff;
color: #666;
border: 2rpx solid #dcdfe6;
}
}
}
// uview-plus 表单样式调整
::v-deep .u-form-item {
margin-bottom: 40rpx;
.u-form-item__body {
padding: 0;
align-items: flex-start;
}
.u-form-item__body__left__content__label {
font-size: 28rpx;
color: #333;
font-weight: 500;
width: 180rpx;
flex-shrink: 0;
text-align: right;
padding-right: 20rpx;
line-height: 80rpx;
}
.u-form-item__body__right {
flex: 1;
min-width: 0;
}
}
::v-deep .u-form-item__body__left__content__required {
position: static;
padding-right: 10rpx;
}
// 输入框样式优化
::v-deep .u-input {
.u-input__content {
padding: 0;
.u-input__content__field-wrapper {
border: none;
border-radius: 0;
.u-input__content__field-wrapper__field {
font-size: 28rpx;
height: auto;
}
.u-input__content__field-wrapper__placeholder {
color: #c0c4cc;
font-size: 28rpx;
}
}
&.u-input--focus {
.u-input__content__field-wrapper {
border-bottom-color: #5DB66F;
}
}
}
}
// 模态框样式调整
::v-deep .u-modal {
.u-modal__content {
border-radius: 20rpx;
padding: 20rpx 0rpx;
}
.u-modal__header {
border-bottom: 2rpx solid #f0f0f0;
padding: 30rpx;
.u-modal__header__title {
font-size: 32rpx;
font-weight: 600;
color: #333;
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论