|
|
|
|
@ -1,123 +1,112 @@
|
|
|
|
|
<template>
|
|
|
|
|
<view class="page-container">
|
|
|
|
|
<view class="header-section">
|
|
|
|
|
<view class="back-btn" @click="goBack">
|
|
|
|
|
<text class="back-icon">‹</text>
|
|
|
|
|
<text class="back-text">返回</text>
|
|
|
|
|
</view>
|
|
|
|
|
<text class="header-title">设备分类</text>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="search-section">
|
|
|
|
|
<view class="search-wrapper">
|
|
|
|
|
<view class="search-icon">
|
|
|
|
|
<text class="iconfont icon-search"></text>
|
|
|
|
|
</view>
|
|
|
|
|
<input
|
|
|
|
|
v-model="searchKeyword"
|
|
|
|
|
class="search-input"
|
|
|
|
|
type="text"
|
|
|
|
|
placeholder="请输入分类编码或名称"
|
|
|
|
|
placeholder-class="input-placeholder"
|
|
|
|
|
@input="handleSearch"
|
|
|
|
|
/>
|
|
|
|
|
<view v-if="searchKeyword" class="clear-btn" @click="clearSearch">
|
|
|
|
|
<text class="clear-icon">×</text>
|
|
|
|
|
<AppTitleHeader :title="t('equipmentCategory.moduleName')" :subTitle="t('equipmentCategory.subTitle')" :showSubTitle="true" />
|
|
|
|
|
|
|
|
|
|
<!-- 搜索区域 -->
|
|
|
|
|
<view class="search-card">
|
|
|
|
|
<view class="search-row">
|
|
|
|
|
<view class="search-input-wrap">
|
|
|
|
|
<text class="iconfont icon-search search-icon"></text>
|
|
|
|
|
<input v-model="searchKeyword" class="search-input" :placeholder="t('equipmentCategory.searchPlaceholder')" @confirm="handleSearch" />
|
|
|
|
|
</view>
|
|
|
|
|
<view class="search-btn" @click="handleSearch">{{ t('functionCommon.search') }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<scroll-view scroll-y class="content-scroll">
|
|
|
|
|
<view class="category-list">
|
|
|
|
|
<view
|
|
|
|
|
v-for="(item, index) in categoryList"
|
|
|
|
|
:key="index"
|
|
|
|
|
class="category-card"
|
|
|
|
|
>
|
|
|
|
|
<!-- 列表区域 -->
|
|
|
|
|
<scroll-view scroll-y class="list-scroll" :scroll-top="scrollTop" @scroll="onScroll" @scrolltolower="loadMore" :lower-threshold="80">
|
|
|
|
|
<view class="list-wrap">
|
|
|
|
|
<view v-for="item in filteredList" :key="item.id" class="type-card" @click="openDetail(item)">
|
|
|
|
|
<view class="card-header">
|
|
|
|
|
<view class="header-left">
|
|
|
|
|
<text class="category-name">{{ item.name }}</text>
|
|
|
|
|
<text class="category-code">编码: {{ item.code }}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="card-actions">
|
|
|
|
|
<view class="action-btn edit-btn" @click.stop="handleEdit(item)">
|
|
|
|
|
<text class="action-icon">✎</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="action-btn delete-btn" @click.stop="handleDelete(item)">
|
|
|
|
|
<text class="action-icon">🗑</text>
|
|
|
|
|
</view>
|
|
|
|
|
<text class="type-name">{{ textValue(item.name) }}</text>
|
|
|
|
|
<text class="type-code">{{ t('equipmentCategory.code') }}: {{ textValue(item.code) }}</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="card-body">
|
|
|
|
|
<view class="card-row">
|
|
|
|
|
<text class="card-label">排序</text>
|
|
|
|
|
<text class="card-value">{{ item.sort }}</text>
|
|
|
|
|
<view class="row">
|
|
|
|
|
<text class="label">{{ t('equipmentCategory.parentName') }}</text>
|
|
|
|
|
<text class="value">{{ getParentName(item.parentId) }}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="row">
|
|
|
|
|
<text class="label">{{ t('equipmentCategory.sort') }}</text>
|
|
|
|
|
<text class="value">{{ textValue(item.sort) }}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="card-row">
|
|
|
|
|
<text class="card-label">备注</text>
|
|
|
|
|
<text class="card-value">{{ item.remark || '-' }}</text>
|
|
|
|
|
<view class="row">
|
|
|
|
|
<text class="label">{{ t('equipmentCategory.remark') }}</text>
|
|
|
|
|
<text class="value">{{ textValue(item.remark) }}</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="card-actions">
|
|
|
|
|
<view class="action-btn edit-btn" @click.stop="openEdit(item)">
|
|
|
|
|
<uni-icons type="compose" size="18" color="#ffffff"></uni-icons>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="action-btn delete-btn" @click.stop="confirmDelete(item)">
|
|
|
|
|
<uni-icons type="trash" size="18" color="#ffffff"></uni-icons>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view v-if="loading" class="loading-text">{{ t('functionCommon.loading') }}</view>
|
|
|
|
|
<view v-else-if="!filteredList.length" class="empty-text">{{ t('equipmentCategory.empty') }}</view>
|
|
|
|
|
<view v-else-if="finished" class="finished-text">{{ t('functionCommon.noMore') }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
</scroll-view>
|
|
|
|
|
|
|
|
|
|
<view class="add-btn" @click="showAddForm">
|
|
|
|
|
<!-- 新增悬浮按钮 -->
|
|
|
|
|
<view class="add-btn" @click="openCreate">
|
|
|
|
|
<text class="add-icon">+</text>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<uni-popup ref="addPopup" type="center" background-color="#fff">
|
|
|
|
|
<!-- 返回顶部 -->
|
|
|
|
|
<view v-if="showGoTop" class="go-top-btn" @click="goTop">
|
|
|
|
|
<text class="go-top-icon">↑</text>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<!-- 新增/编辑弹框 -->
|
|
|
|
|
<uni-popup ref="formPopupRef" type="center" background-color="#fff">
|
|
|
|
|
<view class="popup-content">
|
|
|
|
|
<view class="popup-header">
|
|
|
|
|
<text class="popup-title">{{ isEdit ? '编辑分类' : '新增分类' }}</text>
|
|
|
|
|
<view class="popup-close" @click="hideAddForm">
|
|
|
|
|
<text class="popup-title">{{ formMode === 'create' ? t('equipmentCategory.createTitle') : t('equipmentCategory.editTitle') }}</text>
|
|
|
|
|
<view class="popup-close" @click="closeForm">
|
|
|
|
|
<text class="close-icon">×</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="form-content">
|
|
|
|
|
<view class="form-item">
|
|
|
|
|
<text class="form-label">分类编码 <text class="required">*</text></text>
|
|
|
|
|
<input
|
|
|
|
|
v-model="formData.code"
|
|
|
|
|
class="form-input"
|
|
|
|
|
type="text"
|
|
|
|
|
placeholder="请输入分类编码"
|
|
|
|
|
/>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="form-item">
|
|
|
|
|
<text class="form-label">分类名称 <text class="required">*</text></text>
|
|
|
|
|
<input
|
|
|
|
|
v-model="formData.name"
|
|
|
|
|
class="form-input"
|
|
|
|
|
type="text"
|
|
|
|
|
placeholder="请输入分类名称"
|
|
|
|
|
/>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="form-item">
|
|
|
|
|
<text class="form-label">排序</text>
|
|
|
|
|
<input
|
|
|
|
|
v-model="formData.sort"
|
|
|
|
|
class="form-input"
|
|
|
|
|
type="number"
|
|
|
|
|
placeholder="请输入排序号"
|
|
|
|
|
/>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="form-item">
|
|
|
|
|
<text class="form-label">备注</text>
|
|
|
|
|
<textarea
|
|
|
|
|
v-model="formData.remark"
|
|
|
|
|
class="form-textarea"
|
|
|
|
|
placeholder="请输入备注"
|
|
|
|
|
:maxlength="200"
|
|
|
|
|
/>
|
|
|
|
|
<scroll-view scroll-y class="form-scroll">
|
|
|
|
|
<view class="form-content">
|
|
|
|
|
<view class="form-item">
|
|
|
|
|
<text class="form-label">{{ t('equipmentCategory.code') }} <text class="required-star">*</text></text>
|
|
|
|
|
<input v-model="formData.code" class="form-input" type="text" :placeholder="t('equipmentCategory.placeholderCode')" :disabled="formMode === 'update'" />
|
|
|
|
|
</view>
|
|
|
|
|
<view class="form-item">
|
|
|
|
|
<text class="form-label">{{ t('equipmentCategory.name') }} <text class="required-star">*</text></text>
|
|
|
|
|
<input v-model="formData.name" class="form-input" type="text" :placeholder="t('equipmentCategory.placeholderName')" />
|
|
|
|
|
</view>
|
|
|
|
|
<view class="form-item">
|
|
|
|
|
<text class="form-label">{{ t('equipmentCategory.parentName') }}</text>
|
|
|
|
|
<picker :range="parentCategoryLabels" @change="onParentChange">
|
|
|
|
|
<view class="form-picker">
|
|
|
|
|
<text :class="['picker-text', formData.parentId === undefined || formData.parentId === 0 ? 'placeholder' : '']">{{ selectedParentLabel }}</text>
|
|
|
|
|
<text class="picker-arrow">›</text>
|
|
|
|
|
</view>
|
|
|
|
|
</picker>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="form-item">
|
|
|
|
|
<text class="form-label">{{ t('equipmentCategory.sort') }}</text>
|
|
|
|
|
<input v-model="formData.sort" class="form-input" type="number" :placeholder="t('equipmentCategory.placeholderSort')" />
|
|
|
|
|
</view>
|
|
|
|
|
<view class="form-item">
|
|
|
|
|
<text class="form-label">{{ t('equipmentCategory.remark') }}</text>
|
|
|
|
|
<textarea v-model="formData.remark" class="form-textarea" :placeholder="t('equipmentCategory.placeholderRemark')" :maxlength="200" />
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</scroll-view>
|
|
|
|
|
<view class="form-footer">
|
|
|
|
|
<view class="footer-btn cancel-btn" @click="hideAddForm">
|
|
|
|
|
<text class="btn-text">取消</text>
|
|
|
|
|
<view class="footer-btn cancel-btn" @click="closeForm">
|
|
|
|
|
<text class="btn-text">{{ t('functionCommon.cancel') }}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="footer-btn confirm-btn" @click="handleSave">
|
|
|
|
|
<text class="btn-text">保存</text>
|
|
|
|
|
<view class="footer-btn confirm-btn" @click="submitForm">
|
|
|
|
|
<text class="btn-text">{{ t('functionCommon.save') }}</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
@ -126,448 +115,304 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
import { ref, reactive } from 'vue';
|
|
|
|
|
|
|
|
|
|
const addPopup = ref(null);
|
|
|
|
|
const searchKeyword = ref('');
|
|
|
|
|
const isEdit = ref(false);
|
|
|
|
|
|
|
|
|
|
import { ref, reactive, computed } from 'vue'
|
|
|
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
|
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
|
import AppTitleHeader from '@/components/common/AppTitleHeader.vue'
|
|
|
|
|
import { getDeviceTypeTree, getDeviceType, createDeviceType, updateDeviceType, deleteDeviceType } from '@/api/mes/deviceType'
|
|
|
|
|
|
|
|
|
|
const { t } = useI18n()
|
|
|
|
|
const formPopupRef = ref(null)
|
|
|
|
|
const searchKeyword = ref('')
|
|
|
|
|
const list = ref([])
|
|
|
|
|
const allCategories = ref([])
|
|
|
|
|
const loading = ref(false)
|
|
|
|
|
const finished = ref(false)
|
|
|
|
|
const scrollTop = ref(0)
|
|
|
|
|
const showGoTop = ref(false)
|
|
|
|
|
const formMode = ref('create')
|
|
|
|
|
const formData = reactive({
|
|
|
|
|
id: undefined,
|
|
|
|
|
code: '',
|
|
|
|
|
name: '',
|
|
|
|
|
parentId: 0,
|
|
|
|
|
sort: '',
|
|
|
|
|
remark: ''
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const categoryList = reactive([
|
|
|
|
|
{ code: 'EQ001', name: '生产设备', sort: 1, remark: '生产线主要设备' },
|
|
|
|
|
{ code: 'EQ002', name: '检测设备', sort: 2, remark: '质量检测用设备' },
|
|
|
|
|
{ code: 'EQ003', name: '辅助设备', sort: 3, remark: '辅助生产设备' },
|
|
|
|
|
{ code: 'EQ004', name: '动力设备', sort: 4, remark: '电力、空压等设备' },
|
|
|
|
|
{ code: 'EQ005', name: '运输设备', sort: 5, remark: '物料运输设备' },
|
|
|
|
|
{ code: 'EQ006', name: '办公设备', sort: 6, remark: '办公用设备' }
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
function goBack() {
|
|
|
|
|
uni.navigateBack();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handleSearch() {
|
|
|
|
|
console.log('搜索:', searchKeyword.value);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function clearSearch() {
|
|
|
|
|
searchKeyword.value = '';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handleEdit(item) {
|
|
|
|
|
isEdit.value = true;
|
|
|
|
|
formData.code = item.code;
|
|
|
|
|
formData.name = item.name;
|
|
|
|
|
formData.sort = item.sort;
|
|
|
|
|
formData.remark = item.remark;
|
|
|
|
|
addPopup.value.open();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handleDelete(item) {
|
|
|
|
|
uni.showModal({
|
|
|
|
|
title: '确认删除',
|
|
|
|
|
content: `确定要删除"${item.name}"吗？`,
|
|
|
|
|
success: () => {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '删除成功',
|
|
|
|
|
icon: 'success'
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function showAddForm() {
|
|
|
|
|
isEdit.value = false;
|
|
|
|
|
resetForm();
|
|
|
|
|
addPopup.value.open();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function hideAddForm() {
|
|
|
|
|
addPopup.value.close();
|
|
|
|
|
resetForm();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function resetForm() {
|
|
|
|
|
formData.code = '';
|
|
|
|
|
formData.name = '';
|
|
|
|
|
formData.sort = '';
|
|
|
|
|
formData.remark = '';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handleSave() {
|
|
|
|
|
if (!formData.code || !formData.name) {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '请填写必填项',
|
|
|
|
|
icon: 'none'
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
onLoad(async () => {
|
|
|
|
|
await fetchList()
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
async function fetchList() {
|
|
|
|
|
loading.value = true
|
|
|
|
|
try {
|
|
|
|
|
const res = await getDeviceTypeTree({
|
|
|
|
|
code: searchKeyword.value.trim() || undefined,
|
|
|
|
|
name: searchKeyword.value.trim() || undefined
|
|
|
|
|
})
|
|
|
|
|
const root = res && res.data !== undefined ? res.data : res
|
|
|
|
|
const treeData = Array.isArray(root) ? root : (Array.isArray(root?.data) ? root.data : [])
|
|
|
|
|
allCategories.value = flattenTree(buildTree(treeData))
|
|
|
|
|
list.value = allCategories.value
|
|
|
|
|
finished.value = true
|
|
|
|
|
} catch (e) {
|
|
|
|
|
uni.showToast({ title: t('functionCommon.loadFailed'), icon: 'none' })
|
|
|
|
|
} finally {
|
|
|
|
|
loading.value = false
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '保存成功',
|
|
|
|
|
icon: 'success'
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
hideAddForm();
|
|
|
|
|
resetForm();
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.page-container {
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
background-color: #f0f2f5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header-section {
|
|
|
|
|
background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
|
|
|
|
|
padding: 60rpx 40rpx 40rpx 30rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.back-btn {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 30rpx;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.back-icon {
|
|
|
|
|
font-size: 48rpx;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
margin-right: 8rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.back-text {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
}
|
|
|
|
|
function buildTree(data) {
|
|
|
|
|
const map = {}
|
|
|
|
|
const roots = []
|
|
|
|
|
data.forEach(item => { map[item.id] = { ...item, children: [] } })
|
|
|
|
|
data.forEach(item => {
|
|
|
|
|
if (item.parentId && map[item.parentId]) {
|
|
|
|
|
map[item.parentId].children.push(map[item.id])
|
|
|
|
|
} else {
|
|
|
|
|
roots.push(map[item.id])
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
return roots
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header-title {
|
|
|
|
|
font-size: 34rpx;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
function flattenTree(nodes, depth = 0) {
|
|
|
|
|
const result = []
|
|
|
|
|
nodes.forEach(node => {
|
|
|
|
|
result.push({ ...node, _depth: depth })
|
|
|
|
|
if (node.children && node.children.length) {
|
|
|
|
|
result.push(...flattenTree(node.children, depth + 1))
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
return result
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.search-section {
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
padding: 24rpx 30rpx;
|
|
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
}
|
|
|
|
|
const filteredList = computed(() => {
|
|
|
|
|
if (!searchKeyword.value.trim()) return list.value
|
|
|
|
|
const kw = searchKeyword.value.trim().toLowerCase()
|
|
|
|
|
return list.value.filter(item =>
|
|
|
|
|
(item.name && item.name.toLowerCase().includes(kw)) ||
|
|
|
|
|
(item.code && item.code.toLowerCase().includes(kw))
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
.search-wrapper {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
background: #f5f7fa;
|
|
|
|
|
border-radius: 48rpx;
|
|
|
|
|
padding: 0 24rpx;
|
|
|
|
|
function getParentName(parentId) {
|
|
|
|
|
if (!parentId || parentId === 0) return t('equipmentCategory.rootCategory')
|
|
|
|
|
const parent = allCategories.value.find(c => c.id === parentId)
|
|
|
|
|
return parent ? parent.name : t('equipmentCategory.rootCategory')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.search-icon {
|
|
|
|
|
margin-right: 20rpx;
|
|
|
|
|
|
|
|
|
|
.iconfont {
|
|
|
|
|
font-size: 36rpx;
|
|
|
|
|
color: #666666;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
const parentCategoryOptions = computed(() => {
|
|
|
|
|
const root = [{ label: t('equipmentCategory.rootCategory'), value: 0 }]
|
|
|
|
|
allCategories.value.forEach(item => {
|
|
|
|
|
root.push({ label: item.name || '', value: item.id })
|
|
|
|
|
})
|
|
|
|
|
return root
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
.search-input {
|
|
|
|
|
flex: 1;
|
|
|
|
|
height: 72rpx;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #333333;
|
|
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
const parentCategoryLabels = computed(() => parentCategoryOptions.value.map(o => o.label))
|
|
|
|
|
|
|
|
|
|
.input-placeholder {
|
|
|
|
|
color: #999999;
|
|
|
|
|
}
|
|
|
|
|
const selectedParentLabel = computed(() => {
|
|
|
|
|
const opt = parentCategoryOptions.value.find(o => o.value === formData.parentId)
|
|
|
|
|
return opt ? opt.label : t('equipmentCategory.placeholderParent')
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
.clear-btn {
|
|
|
|
|
width: 48rpx;
|
|
|
|
|
height: 48rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.clear-icon {
|
|
|
|
|
font-size: 36rpx;
|
|
|
|
|
color: #999999;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.content-scroll {
|
|
|
|
|
flex: 1;
|
|
|
|
|
height: calc(100vh - 260rpx);
|
|
|
|
|
function onParentChange(e) {
|
|
|
|
|
const idx = e.detail.value
|
|
|
|
|
formData.parentId = parentCategoryOptions.value[idx]?.value ?? 0
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.category-list {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 0 24rpx;
|
|
|
|
|
padding-bottom: 120rpx;
|
|
|
|
|
async function handleSearch() {
|
|
|
|
|
await fetchList()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.category-card {
|
|
|
|
|
width: 100%;
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
padding: 28rpx;
|
|
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
|
|
|
function onScroll(e) {
|
|
|
|
|
const top = e?.detail?.scrollTop || 0
|
|
|
|
|
showGoTop.value = top > 600
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-header {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
padding-bottom: 20rpx;
|
|
|
|
|
border-bottom: 2rpx solid #f0f2f5;
|
|
|
|
|
function goTop() {
|
|
|
|
|
scrollTop.value = 0
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header-left {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
function loadMore() {}
|
|
|
|
|
|
|
|
|
|
.category-name {
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #1a3a5c;
|
|
|
|
|
margin-bottom: 8rpx;
|
|
|
|
|
function openCreate() {
|
|
|
|
|
formMode.value = 'create'
|
|
|
|
|
resetForm()
|
|
|
|
|
formPopupRef.value?.open()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.category-code {
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
color: #999999;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-actions {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 16rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.action-btn {
|
|
|
|
|
width: 64rpx;
|
|
|
|
|
height: 64rpx;
|
|
|
|
|
border-radius: 12rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
transform: scale(0.95);
|
|
|
|
|
async function openEdit(item) {
|
|
|
|
|
const id = item?.id
|
|
|
|
|
if (id === undefined || id === null) {
|
|
|
|
|
uni.showToast({ title: t('equipmentCategory.noId'), icon: 'none' })
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.action-icon {
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.edit-btn {
|
|
|
|
|
background: #1a3a5c;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.delete-btn {
|
|
|
|
|
background: #ff4d4f;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-body {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-row {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-bottom: 16rpx;
|
|
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
try {
|
|
|
|
|
const res = await getDeviceType(id)
|
|
|
|
|
const detail = normalizeDetail(res)
|
|
|
|
|
formMode.value = 'update'
|
|
|
|
|
formData.id = detail?.id
|
|
|
|
|
formData.code = textValueForInput(detail?.code)
|
|
|
|
|
formData.name = textValueForInput(detail?.name)
|
|
|
|
|
formData.parentId = detail?.parentId ?? 0
|
|
|
|
|
formData.sort = textValueForInput(detail?.sort)
|
|
|
|
|
formData.remark = textValueForInput(detail?.remark)
|
|
|
|
|
formPopupRef.value?.open()
|
|
|
|
|
} catch (e) {
|
|
|
|
|
uni.showToast({ title: t('equipmentCategory.loadEditFailed'), icon: 'none' })
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-label {
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
color: #999999;
|
|
|
|
|
function confirmDelete(item) {
|
|
|
|
|
const id = item?.id
|
|
|
|
|
if (id === undefined || id === null) return
|
|
|
|
|
uni.showModal({
|
|
|
|
|
title: t('functionCommon.confirmTitle'),
|
|
|
|
|
content: t('equipmentCategory.confirmDeleteContent', { name: textValue(item?.name) }),
|
|
|
|
|
success: async (res) => {
|
|
|
|
|
if (!res.confirm) return
|
|
|
|
|
try {
|
|
|
|
|
await deleteDeviceType(id)
|
|
|
|
|
uni.showToast({ title: t('functionCommon.deleteSuccess'), icon: 'success' })
|
|
|
|
|
await fetchList()
|
|
|
|
|
} catch (e) {
|
|
|
|
|
uni.showToast({ title: t('functionCommon.deleteFailed'), icon: 'none' })
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-value {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #333333;
|
|
|
|
|
flex: 1;
|
|
|
|
|
text-align: right;
|
|
|
|
|
function closeForm() {
|
|
|
|
|
formPopupRef.value?.close()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.add-btn {
|
|
|
|
|
position: fixed;
|
|
|
|
|
bottom: 120rpx;
|
|
|
|
|
right: 30rpx;
|
|
|
|
|
width: 100rpx;
|
|
|
|
|
height: 100rpx;
|
|
|
|
|
background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
box-shadow: 0 8rpx 24rpx rgba(26, 58, 92, 0.3);
|
|
|
|
|
z-index: 999;
|
|
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
|
transform: scale(0.95);
|
|
|
|
|
async function submitForm() {
|
|
|
|
|
if (!formData.code.trim()) {
|
|
|
|
|
uni.showToast({ title: t('equipmentCategory.validatorCodeRequired'), icon: 'none' })
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.add-icon {
|
|
|
|
|
font-size: 60rpx;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
if (!formData.name.trim()) {
|
|
|
|
|
uni.showToast({ title: t('equipmentCategory.validatorNameRequired'), icon: 'none' })
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.popup-content {
|
|
|
|
|
width: 600rpx;
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.popup-header {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 32rpx;
|
|
|
|
|
background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.popup-title {
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.popup-close {
|
|
|
|
|
width: 48rpx;
|
|
|
|
|
height: 48rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
const payload = {
|
|
|
|
|
id: formMode.value === 'update' ? formData.id : undefined,
|
|
|
|
|
code: formData.code.trim(),
|
|
|
|
|
name: formData.name.trim(),
|
|
|
|
|
parentId: formData.parentId || 0,
|
|
|
|
|
sort: toNumberOrUndefined(formData.sort),
|
|
|
|
|
remark: formData.remark.trim() || undefined
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.close-icon {
|
|
|
|
|
font-size: 36rpx;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
try {
|
|
|
|
|
if (formMode.value === 'create') {
|
|
|
|
|
await createDeviceType(payload)
|
|
|
|
|
uni.showToast({ title: t('functionCommon.createSuccess'), icon: 'success' })
|
|
|
|
|
} else {
|
|
|
|
|
await updateDeviceType(payload)
|
|
|
|
|
uni.showToast({ title: t('functionCommon.updateSuccess'), icon: 'success' })
|
|
|
|
|
}
|
|
|
|
|
closeForm()
|
|
|
|
|
await fetchList()
|
|
|
|
|
} catch (e) {
|
|
|
|
|
uni.showToast({ title: t('functionCommon.saveFailed'), icon: 'none' })
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-content {
|
|
|
|
|
padding: 32rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-item {
|
|
|
|
|
margin-bottom: 24rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-label {
|
|
|
|
|
display: block;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #333333;
|
|
|
|
|
margin-bottom: 12rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.required {
|
|
|
|
|
color: #ff4d4f;
|
|
|
|
|
margin-left: 4rpx;
|
|
|
|
|
function resetForm() {
|
|
|
|
|
formData.id = undefined
|
|
|
|
|
formData.code = ''
|
|
|
|
|
formData.name = ''
|
|
|
|
|
formData.parentId = 0
|
|
|
|
|
formData.sort = ''
|
|
|
|
|
formData.remark = ''
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-input {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 80rpx;
|
|
|
|
|
padding: 0 24rpx;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
background: #f5f7fa;
|
|
|
|
|
border-radius: 12rpx;
|
|
|
|
|
border: 2rpx solid #e8eaed;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
function openDetail(item) {
|
|
|
|
|
const id = item?.id
|
|
|
|
|
if (!id && id !== 0) return
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url: `/pages_function/pages/equipmentCategory/detail?id=${encodeURIComponent(String(id))}`
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-textarea {
|
|
|
|
|
width: 100%;
|
|
|
|
|
min-height: 120rpx;
|
|
|
|
|
padding: 16rpx 24rpx;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
background: #f5f7fa;
|
|
|
|
|
border-radius: 12rpx;
|
|
|
|
|
border: 2rpx solid #e8eaed;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
resize: none;
|
|
|
|
|
function normalizeDetail(res) {
|
|
|
|
|
const root = res && res.data !== undefined ? res.data : res
|
|
|
|
|
if (root?.data && typeof root.data === 'object') return root.data
|
|
|
|
|
if (root && typeof root === 'object') return root
|
|
|
|
|
return {}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-footer {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 16rpx;
|
|
|
|
|
margin-top: 32rpx;
|
|
|
|
|
function textValue(value) {
|
|
|
|
|
if (value === 0) return '0'
|
|
|
|
|
if (value === false) return t('functionCommon.no')
|
|
|
|
|
if (value === true) return t('functionCommon.yes')
|
|
|
|
|
if (value === null || value === undefined) return '-'
|
|
|
|
|
const text = String(value).trim()
|
|
|
|
|
return text || '-'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.footer-btn {
|
|
|
|
|
flex: 1;
|
|
|
|
|
height: 88rpx;
|
|
|
|
|
border-radius: 12rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-text {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
function textValueForInput(value) {
|
|
|
|
|
if (value === null || value === undefined) return ''
|
|
|
|
|
return String(value)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cancel-btn {
|
|
|
|
|
background: #f5f7fa;
|
|
|
|
|
|
|
|
|
|
.btn-text {
|
|
|
|
|
color: #666666;
|
|
|
|
|
}
|
|
|
|
|
function toNumberOrUndefined(value) {
|
|
|
|
|
if (value === null || value === undefined || String(value).trim() === '') return undefined
|
|
|
|
|
const num = Number(value)
|
|
|
|
|
return Number.isFinite(num) ? num : undefined
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
.confirm-btn {
|
|
|
|
|
background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
|
|
|
|
|
|
|
|
|
|
.btn-text {
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.page-container { min-height: 100vh; background-color: #f0f2f5; }
|
|
|
|
|
.search-card { background: #ffffff; margin: 20rpx 24rpx; border-radius: 18rpx; padding: 20rpx; box-shadow: 0 4rpx 18rpx rgba(0, 0, 0, 0.04); }
|
|
|
|
|
.search-row { display: flex; align-items: center; gap: 16rpx; }
|
|
|
|
|
.search-input-wrap { flex: 1; display: flex; align-items: center; background: #f5f7fa; border-radius: 44rpx; padding: 0 20rpx; }
|
|
|
|
|
.search-icon { margin-right: 12rpx; font-size: 30rpx; color: #999; }
|
|
|
|
|
.search-input { flex: 1; height: 72rpx; font-size: 28rpx; color: #333; background: transparent; }
|
|
|
|
|
.search-btn { min-width: 120rpx; height: 72rpx; background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%); border-radius: 14rpx; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 28rpx; font-weight: 600; }
|
|
|
|
|
.list-scroll { height: calc(100vh - 360rpx); }
|
|
|
|
|
.list-wrap { padding: 0 24rpx 30rpx; }
|
|
|
|
|
.type-card { background: #ffffff; border-radius: 18rpx; padding: 24rpx; margin-bottom: 18rpx; box-shadow: 0 4rpx 18rpx rgba(0, 0, 0, 0.05); }
|
|
|
|
|
.card-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18rpx; border-bottom: 1rpx solid #edf0f3; }
|
|
|
|
|
.header-left { display: flex; flex-direction: column; }
|
|
|
|
|
.type-name { font-size: 32rpx; font-weight: 600; color: #1a3a5c; margin-bottom: 8rpx; }
|
|
|
|
|
.type-code { font-size: 24rpx; color: #8a9099; }
|
|
|
|
|
.card-body { padding-top: 16rpx; }
|
|
|
|
|
.row { display: flex; justify-content: space-between; align-items: center; margin-top: 12rpx; }
|
|
|
|
|
.label { font-size: 26rpx; color: #8a9099; }
|
|
|
|
|
.value { font-size: 27rpx; color: #30363d; max-width: 62%; text-align: right; }
|
|
|
|
|
.card-actions { margin-top: 24rpx; display: flex; justify-content: flex-end; gap: 14rpx; }
|
|
|
|
|
.action-btn { width: 60rpx; height: 60rpx; border-radius: 12rpx; display: flex; align-items: center; justify-content: center; }
|
|
|
|
|
.edit-btn { background: #1a3a5c; }
|
|
|
|
|
.delete-btn { background: #ff4d4f; }
|
|
|
|
|
.add-btn { position: fixed; right: 28rpx; bottom: 140rpx; width: 96rpx; height: 96rpx; border-radius: 48rpx; background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 8rpx 24rpx rgba(26, 58, 92, 0.32); z-index: 99; }
|
|
|
|
|
.add-icon { color: #ffffff; font-size: 56rpx; line-height: 1; }
|
|
|
|
|
.go-top-btn { position: fixed; right: 28rpx; bottom: 254rpx; width: 88rpx; height: 88rpx; border-radius: 44rpx; background: rgba(26, 58, 92, 0.9); display: flex; align-items: center; justify-content: center; z-index: 99; box-shadow: 0 6rpx 16rpx rgba(26, 58, 92, 0.25); }
|
|
|
|
|
.go-top-icon { color: #ffffff; font-size: 36rpx; font-weight: 700; }
|
|
|
|
|
.popup-content { width: 680rpx; max-height: 80vh; border-radius: 20rpx; overflow: hidden; }
|
|
|
|
|
.popup-header { padding: 24rpx; display: flex; align-items: center; justify-content: space-between; border-bottom: 1rpx solid #edf0f3; }
|
|
|
|
|
.popup-title { font-size: 32rpx; color: #1a3a5c; font-weight: 700; }
|
|
|
|
|
.close-icon { font-size: 38rpx; color: #8e95a0; }
|
|
|
|
|
.form-scroll { max-height: 56vh; }
|
|
|
|
|
.form-content { padding: 24rpx; }
|
|
|
|
|
.form-item { margin-bottom: 18rpx; }
|
|
|
|
|
.form-label { display: block; margin-bottom: 8rpx; font-size: 26rpx; color: #8a9099; }
|
|
|
|
|
.required-star { color: #ff4d4f; }
|
|
|
|
|
.form-input { height: 76rpx; padding: 0 20rpx; border-radius: 12rpx; background: #f5f7fa; font-size: 28rpx; color: #30363d; }
|
|
|
|
|
.form-picker { height: 76rpx; padding: 0 20rpx; border-radius: 12rpx; background: #f5f7fa; display: flex; align-items: center; justify-content: space-between; }
|
|
|
|
|
.picker-text { font-size: 28rpx; color: #30363d; }
|
|
|
|
|
.picker-text.placeholder { color: #999; }
|
|
|
|
|
.picker-arrow { font-size: 30rpx; color: #999; }
|
|
|
|
|
.form-textarea { width: 100%; min-height: 130rpx; padding: 18rpx 20rpx; border-radius: 12rpx; background: #f5f7fa; font-size: 28rpx; color: #30363d; }
|
|
|
|
|
.form-footer { display: flex; gap: 14rpx; padding: 20rpx 24rpx 24rpx; }
|
|
|
|
|
.footer-btn { flex: 1; height: 76rpx; border-radius: 12rpx; display: flex; align-items: center; justify-content: center; }
|
|
|
|
|
.cancel-btn { background: #edf0f4; }
|
|
|
|
|
.confirm-btn { background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%); }
|
|
|
|
|
.btn-text { font-size: 28rpx; font-weight: 600; color: #ffffff; }
|
|
|
|
|
.cancel-btn .btn-text { color: #586070; }
|
|
|
|
|
.loading-text, .empty-text, .finished-text { text-align: center; padding: 28rpx 0; color: #99a1aa; font-size: 26rpx; }
|
|
|
|
|
</style>
|
|
|
|
|
|
