|
|
<template>
|
|
|
<view class="page-container">
|
|
|
<NavBar :title="t('moldOperate.moduleName')" :subTitle="t('moldOperate.subTitle')" />
|
|
|
|
|
|
<!-- 操作类型切换 -->
|
|
|
<view class="operate-tabs">
|
|
|
<view class="operate-tab" :class="{ active: query.operateType === '1' }" @click="switchOperateType('1')">{{
|
|
|
t('moldOperate.tabUp') }}</view>
|
|
|
<view class="operate-tab" :class="{ active: query.operateType === '2' }" @click="switchOperateType('2')">{{
|
|
|
t('moldOperate.tabDown') }}</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 列表查询区 -->
|
|
|
<view class="search-card">
|
|
|
<view class="search-row">
|
|
|
<view class="search-input-wrap">
|
|
|
<text class="iconfont icon-search search-icon"></text>
|
|
|
<input v-model="query.remark" class="search-input" :placeholder="t('moldOperate.searchRemark')"
|
|
|
@confirm="handleSearch" />
|
|
|
</view>
|
|
|
<view class="search-btn" @click="handleSearch">{{ t('functionCommon.search') }}</view>
|
|
|
</view>
|
|
|
<view class="filter-row">
|
|
|
<picker mode="selector" :range="moldFilterOptions" range-key="name" :value="moldIndex"
|
|
|
@change="onMoldFilterChange">
|
|
|
<view class="filter-item">{{ moldFilterLabel }}</view>
|
|
|
</picker>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 列表区 -->
|
|
|
<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 list" :key="item.id" class="type-card" @click="openDetail(item)">
|
|
|
<view class="card-header">
|
|
|
<view class="header-left">
|
|
|
<text class="type-name">{{ textValue(item.moldName) }}</text>
|
|
|
<text class="type-code">{{ t('moldOperate.deviceName') }}: {{ textValue(item.deviceName) }}</text>
|
|
|
</view>
|
|
|
<view class="type-chip">{{ typeLabel(item.operateType) }}</view>
|
|
|
</view>
|
|
|
<view class="card-body">
|
|
|
<view class="row">
|
|
|
<text class="label">{{ t('moldOperate.creatorName') }}</text>
|
|
|
<text class="value">{{ textValue(item.creatorName) }}</text>
|
|
|
</view>
|
|
|
<view class="row">
|
|
|
<text class="label">{{ t('moldOperate.createTime') }}</text>
|
|
|
<text class="value">{{ dateTimeLabel(item.createTime) }}</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="removeItem(item)">
|
|
|
<uni-icons type="trash" size="18" color="#ffffff"></uni-icons>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-if="loading && pageNo === 1" class="hint">{{ t('functionCommon.loading') }}</view>
|
|
|
<view v-else-if="!list.length" class="hint">{{ t('moldOperate.empty') }}</view>
|
|
|
<view v-else-if="loadingMore" class="hint">{{ t('functionCommon.loadingMore') }}</view>
|
|
|
<view v-else-if="finished" class="hint">{{ t('functionCommon.noMoreData') }}</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
|
|
|
<!-- 悬浮新增按钮 -->
|
|
|
<view class="fab-btn" @click="openCreate">
|
|
|
<uni-icons type="plusempty" size="30" color="#fff"></uni-icons>
|
|
|
</view>
|
|
|
<!-- 返回顶部按钮 -->
|
|
|
<view v-if="showGoTop" class="go-top-btn" @click="goTop">
|
|
|
<uni-icons type="arrow-up" size="20" color="#1a3a5c"></uni-icons>
|
|
|
</view>
|
|
|
|
|
|
<!-- 新增/编辑弹框 -->
|
|
|
<uni-popup ref="formPopupRef" type="bottom">
|
|
|
<view class="form-popup">
|
|
|
<view class="popup-header">
|
|
|
<text class="popup-title">{{ formMode === 'create' ? t('moldOperate.createTitle') : t('moldOperate.editTitle')
|
|
|
}}</text>
|
|
|
<text class="popup-close" @click="closeForm">×</text>
|
|
|
</view>
|
|
|
<scroll-view scroll-y class="popup-scroll">
|
|
|
<view class="form-item">
|
|
|
<text class="form-label"><text class="required">*</text>{{ t('moldOperate.operateType') }}</text>
|
|
|
<view class="radio-row">
|
|
|
<view class="radio-item" :class="{ active: String(formData.operateType) === '1' }"
|
|
|
@click="changeFormOperateType('1')">{{ t('moldOperate.tabUp') }}</view>
|
|
|
<view class="radio-item" :class="{ active: String(formData.operateType) === '2' }"
|
|
|
@click="changeFormOperateType('2')">{{ t('moldOperate.tabDown') }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="form-item">
|
|
|
<text class="form-label"><text class="required">*</text>{{ t('moldOperate.device') }}</text>
|
|
|
<picker mode="selector" :range="deviceOptions" range-key="label" :value="formDeviceIndex"
|
|
|
@change="onFormDeviceChange">
|
|
|
<view class="picker-view">{{ formDeviceLabel || t('moldOperate.placeholderDevice') }}</view>
|
|
|
</picker>
|
|
|
</view>
|
|
|
|
|
|
<view class="form-item">
|
|
|
<text class="form-label"><text class="required">*</text>{{ String(formData.operateType) === '2' ?
|
|
|
t('moldOperate.lowerMold') : t('moldOperate.mold') }}</text>
|
|
|
<view class="sub-action block" @click="openMoldPicker">{{ t('moldOperate.selectMold') }}</view>
|
|
|
</view>
|
|
|
<view v-if="!selectedMolds.length" class="item-empty">{{ t('moldOperate.noSelectedMold') }}</view>
|
|
|
<view v-for="(mold, index) in selectedMolds" :key="mold.id" class="selected-item">
|
|
|
<view>
|
|
|
<view class="selected-name">{{ textValue(mold.name || mold.moldName) }}</view>
|
|
|
<view class="selected-code">{{ textValue(mold.code || mold.moldCode) }}</view>
|
|
|
</view>
|
|
|
<text class="item-remove" @click="removeSelectedMold(index)">×</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="form-item">
|
|
|
<text class="form-label">{{ t('moldOperate.remark') }}</text>
|
|
|
<textarea v-model="formData.remark" class="form-textarea" :placeholder="t('moldOperate.placeholderRemark')"
|
|
|
maxlength="200" />
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
<view class="popup-footer">
|
|
|
<view class="footer-btn cancel" @click="closeForm">{{ t('functionCommon.cancel') }}</view>
|
|
|
<view class="footer-btn confirm" @click="submitForm">{{ t('functionCommon.save') }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
|
|
|
<!-- 模具选择弹框 -->
|
|
|
<uni-popup ref="moldPickerRef" type="bottom">
|
|
|
<view class="picker-popup">
|
|
|
<view class="picker-header">
|
|
|
<text class="picker-title">{{ t('moldOperate.selectMold') }}</text>
|
|
|
<text class="picker-close" @click="closeMoldPicker">×</text>
|
|
|
</view>
|
|
|
<scroll-view scroll-y class="picker-scroll">
|
|
|
<view v-for="m in pickerSourceList" :key="m.id" class="picker-item" @click="toggleMold(m)">
|
|
|
<view>
|
|
|
<view class="picker-item-name">{{ textValue(m.name || m.moldName) }}</view>
|
|
|
<view class="picker-item-code">{{ textValue(m.code || m.moldCode) }}</view>
|
|
|
</view>
|
|
|
<text class="picker-check">{{ selectedMoldIdSet.has(String(m.id)) ? '✓' : '' }}</text>
|
|
|
</view>
|
|
|
<view v-if="pickerLoading" class="picker-hint">{{ t('functionCommon.loading') }}</view>
|
|
|
<view v-else-if="!pickerSourceList.length" class="picker-hint">{{ t('moldOperate.noMoldData') }}</view>
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { computed, reactive, ref } from 'vue'
|
|
|
import { onShow } from '@dcloudio/uni-app'
|
|
|
import { useI18n } from 'vue-i18n'
|
|
|
import NavBar from '@/components/common/NavBar.vue'
|
|
|
import { getMoldList, getInTransitMoldAllList } from '@/api/mes/mold'
|
|
|
import { getMoldOperatePage, getMoldOperateDetail, createMoldOperate, updateMoldOperate, deleteMoldOperate, getLowerMoldList, getDeviceLedgerList } from '@/api/mes/moldoperate'
|
|
|
|
|
|
const { t } = useI18n()
|
|
|
|
|
|
const list = ref([])
|
|
|
const loading = ref(false)
|
|
|
const loadingMore = ref(false)
|
|
|
const finished = ref(false)
|
|
|
const pageNo = ref(1)
|
|
|
const pageSize = ref(10)
|
|
|
const scrollTop = ref(0)
|
|
|
const showGoTop = ref(false)
|
|
|
|
|
|
const query = reactive({
|
|
|
operateType: '1',
|
|
|
moldId: undefined,
|
|
|
remark: ''
|
|
|
})
|
|
|
const moldFilterOptions = ref([{ id: undefined, name: '' }])
|
|
|
const moldIndex = ref(0)
|
|
|
const moldFilterLabel = computed(() => moldFilterOptions.value[moldIndex.value]?.name || t('moldOperate.allMold'))
|
|
|
|
|
|
const formPopupRef = ref(null)
|
|
|
const moldPickerRef = ref(null)
|
|
|
const formMode = ref('create')
|
|
|
const formData = reactive({
|
|
|
id: undefined,
|
|
|
operateType: '1',
|
|
|
deviceId: undefined,
|
|
|
moldId: '',
|
|
|
lowerMoldId: '',
|
|
|
remark: ''
|
|
|
})
|
|
|
const selectedMolds = ref([])
|
|
|
const selectedMoldIdSet = computed(() => new Set(selectedMolds.value.map((m) => String(m.id))))
|
|
|
|
|
|
const deviceOptions = ref([])
|
|
|
const formDeviceIndex = computed(() => {
|
|
|
const idx = deviceOptions.value.findIndex((d) => Number(d.value) === Number(formData.deviceId))
|
|
|
return idx < 0 ? 0 : idx
|
|
|
})
|
|
|
const formDeviceLabel = computed(() => deviceOptions.value.find((d) => Number(d.value) === Number(formData.deviceId))?.label || '')
|
|
|
|
|
|
const upperMoldOptions = ref([])
|
|
|
const lowerMoldOptions = ref([])
|
|
|
const pickerLoading = ref(false)
|
|
|
const pickerSourceList = computed(() => (String(formData.operateType) === '2' ? lowerMoldOptions.value : upperMoldOptions.value))
|
|
|
|
|
|
function textValue(v) {
|
|
|
if (v === 0) return '0'
|
|
|
if (v === null || v === undefined) return '-'
|
|
|
const s = String(v).trim()
|
|
|
return s || '-'
|
|
|
}
|
|
|
function dateTimeLabel(v) {
|
|
|
if (!v) return '-'
|
|
|
const d = new Date(Number(v))
|
|
|
if (Number.isNaN(d.getTime())) return textValue(v)
|
|
|
const p = (n) => String(n).padStart(2, '0')
|
|
|
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
|
|
|
}
|
|
|
function normalizePageData(res) {
|
|
|
const root = res && res.data !== undefined ? res.data : res
|
|
|
const l = root?.list || root?.rows || root?.records || root?.data?.list || []
|
|
|
const total = root?.total ?? root?.data?.total ?? (Array.isArray(l) ? l.length : 0)
|
|
|
return { list: Array.isArray(l) ? l : [], total: Number(total || 0) }
|
|
|
}
|
|
|
function typeLabel(type) {
|
|
|
return String(type) === '2' ? t('moldOperate.tabDown') : t('moldOperate.tabUp')
|
|
|
}
|
|
|
|
|
|
async function fetchList(reset = true) {
|
|
|
if (reset) {
|
|
|
pageNo.value = 1
|
|
|
finished.value = false
|
|
|
}
|
|
|
if (pageNo.value === 1) loading.value = true
|
|
|
else loadingMore.value = true
|
|
|
try {
|
|
|
const params = {
|
|
|
pageNo: pageNo.value,
|
|
|
pageSize: pageSize.value,
|
|
|
operateType: query.operateType,
|
|
|
moldId: query.moldId,
|
|
|
remark: query.remark || undefined
|
|
|
}
|
|
|
const res = await getMoldOperatePage(params)
|
|
|
const page = normalizePageData(res)
|
|
|
if (reset) list.value = page.list
|
|
|
else list.value = [...list.value, ...page.list]
|
|
|
finished.value = list.value.length >= page.total || page.list.length < pageSize.value
|
|
|
} catch (e) {
|
|
|
if (!reset) pageNo.value = Math.max(1, pageNo.value - 1)
|
|
|
uni.showToast({ title: t('functionCommon.loadFailed'), icon: 'none' })
|
|
|
} finally {
|
|
|
loading.value = false
|
|
|
loadingMore.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function loadMoldFilter() {
|
|
|
const res = await getMoldList({})
|
|
|
const root = res && res.data !== undefined ? res.data : res
|
|
|
const data = Array.isArray(root) ? root : Array.isArray(root?.list) ? root.list : []
|
|
|
moldFilterOptions.value = [{ id: undefined, name: t('moldOperate.allMold') }, ...data]
|
|
|
}
|
|
|
async function loadDevices() {
|
|
|
const res = await getDeviceLedgerList({})
|
|
|
const root = res && res.data !== undefined ? res.data : res
|
|
|
const data = Array.isArray(root) ? root : Array.isArray(root?.list) ? root.list : []
|
|
|
deviceOptions.value = data.map((d) => ({
|
|
|
value: d.id,
|
|
|
label: `${d.deviceCode || ''} ${d.deviceName || ''}`.trim()
|
|
|
}))
|
|
|
}
|
|
|
async function loadUpperMoldOptions() {
|
|
|
const res = await getInTransitMoldAllList()
|
|
|
const root = res && res.data !== undefined ? res.data : res
|
|
|
upperMoldOptions.value = Array.isArray(root) ? root : []
|
|
|
}
|
|
|
async function loadLowerMoldOptions() {
|
|
|
if (!formData.deviceId) {
|
|
|
lowerMoldOptions.value = []
|
|
|
return
|
|
|
}
|
|
|
const res = await getLowerMoldList(formData.deviceId)
|
|
|
const root = res && res.data !== undefined ? res.data : res
|
|
|
lowerMoldOptions.value = Array.isArray(root) ? root : []
|
|
|
}
|
|
|
|
|
|
function switchOperateType(type) {
|
|
|
query.operateType = type
|
|
|
fetchList(true)
|
|
|
}
|
|
|
function handleSearch() { fetchList(true) }
|
|
|
function onMoldFilterChange(e) {
|
|
|
const idx = Number(e?.detail?.value || 0)
|
|
|
moldIndex.value = idx
|
|
|
const option = moldFilterOptions.value[idx]
|
|
|
query.moldId = option ? option.id : undefined
|
|
|
fetchList(true)
|
|
|
}
|
|
|
function onScroll(e) {
|
|
|
const top = Number(e?.detail?.scrollTop || 0)
|
|
|
showGoTop.value = top > 600
|
|
|
}
|
|
|
function goTop() { scrollTop.value = 0 }
|
|
|
async function loadMore() {
|
|
|
if (loading.value || loadingMore.value || finished.value) return
|
|
|
pageNo.value += 1
|
|
|
await fetchList(false)
|
|
|
}
|
|
|
|
|
|
function resetFormData() {
|
|
|
formData.id = undefined
|
|
|
formData.operateType = query.operateType || '1'
|
|
|
formData.deviceId = undefined
|
|
|
formData.moldId = ''
|
|
|
formData.lowerMoldId = ''
|
|
|
formData.remark = ''
|
|
|
selectedMolds.value = []
|
|
|
}
|
|
|
function openCreate() {
|
|
|
formMode.value = 'create'
|
|
|
resetFormData()
|
|
|
formPopupRef.value?.open()
|
|
|
}
|
|
|
async function openEdit(row) {
|
|
|
if (!row?.id) {
|
|
|
uni.showToast({ title: t('functionCommon.noIdEdit'), icon: 'none' })
|
|
|
return
|
|
|
}
|
|
|
formMode.value = 'update'
|
|
|
resetFormData()
|
|
|
try {
|
|
|
const res = await getMoldOperateDetail(row.id)
|
|
|
const detail = res?.data || {}
|
|
|
formData.id = detail.id
|
|
|
formData.operateType = String(detail.operateType || '1')
|
|
|
formData.deviceId = detail.deviceId
|
|
|
formData.remark = detail.remark || ''
|
|
|
await refreshPickerByType()
|
|
|
const selectedIds = String(formData.operateType) === '2' ? parseIdList(detail.lowerMoldId) : parseIdList(detail.moldId)
|
|
|
selectedMolds.value = pickerSourceList.value.filter((m) => selectedIds.includes(Number(m.id)))
|
|
|
formPopupRef.value?.open()
|
|
|
} catch (e) {
|
|
|
uni.showToast({ title: t('moldOperate.loadEditFailed'), icon: 'none' })
|
|
|
}
|
|
|
}
|
|
|
function parseIdList(raw) {
|
|
|
if (Array.isArray(raw)) return raw.map((x) => Number(x)).filter((x) => !Number.isNaN(x))
|
|
|
return String(raw || '').split(',').map((x) => Number(x)).filter((x) => !Number.isNaN(x))
|
|
|
}
|
|
|
function closeForm() { formPopupRef.value?.close() }
|
|
|
|
|
|
async function changeFormOperateType(type) {
|
|
|
formData.operateType = type
|
|
|
selectedMolds.value = []
|
|
|
await refreshPickerByType()
|
|
|
}
|
|
|
async function refreshPickerByType() {
|
|
|
pickerLoading.value = true
|
|
|
try {
|
|
|
if (String(formData.operateType) === '2') {
|
|
|
await loadLowerMoldOptions()
|
|
|
} else {
|
|
|
await loadUpperMoldOptions()
|
|
|
}
|
|
|
} finally {
|
|
|
pickerLoading.value = false
|
|
|
}
|
|
|
}
|
|
|
async function onFormDeviceChange(e) {
|
|
|
const idx = Number(e?.detail?.value || 0)
|
|
|
const option = deviceOptions.value[idx]
|
|
|
formData.deviceId = option ? option.value : undefined
|
|
|
if (String(formData.operateType) === '2') {
|
|
|
selectedMolds.value = []
|
|
|
await refreshPickerByType()
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function openMoldPicker() {
|
|
|
if (!formData.deviceId) {
|
|
|
uni.showToast({ title: t('moldOperate.validatorDeviceRequired'), icon: 'none' })
|
|
|
return
|
|
|
}
|
|
|
await refreshPickerByType()
|
|
|
moldPickerRef.value?.open()
|
|
|
}
|
|
|
function closeMoldPicker() { moldPickerRef.value?.close() }
|
|
|
function toggleMold(mold) {
|
|
|
const id = String(mold.id)
|
|
|
const idx = selectedMolds.value.findIndex((i) => String(i.id) === id)
|
|
|
if (idx >= 0) {
|
|
|
selectedMolds.value.splice(idx, 1)
|
|
|
return
|
|
|
}
|
|
|
selectedMolds.value.push({
|
|
|
id: mold.id,
|
|
|
name: mold.name || mold.moldName,
|
|
|
code: mold.code || mold.moldCode
|
|
|
})
|
|
|
}
|
|
|
function removeSelectedMold(index) { selectedMolds.value.splice(index, 1) }
|
|
|
|
|
|
function validForm() {
|
|
|
if (!formData.operateType) {
|
|
|
uni.showToast({ title: t('moldOperate.validatorOperateTypeRequired'), icon: 'none' })
|
|
|
return false
|
|
|
}
|
|
|
if (!formData.deviceId) {
|
|
|
uni.showToast({ title: t('moldOperate.validatorDeviceRequired'), icon: 'none' })
|
|
|
return false
|
|
|
}
|
|
|
if (!selectedMolds.value.length) {
|
|
|
uni.showToast({ title: String(formData.operateType) === '2' ? t('moldOperate.validatorLowerMoldRequired') : t('moldOperate.validatorMoldRequired'), icon: 'none' })
|
|
|
return false
|
|
|
}
|
|
|
return true
|
|
|
}
|
|
|
async function submitForm() {
|
|
|
if (!validForm()) return
|
|
|
const selectedIds = selectedMolds.value.map((m) => m.id)
|
|
|
const payload = {
|
|
|
id: formData.id,
|
|
|
operateType: Number(formData.operateType),
|
|
|
deviceId: formData.deviceId,
|
|
|
remark: formData.remark || undefined
|
|
|
}
|
|
|
if (String(formData.operateType) === '2') {
|
|
|
const allIds = lowerMoldOptions.value.map((m) => m.id)
|
|
|
const selectedSet = new Set(selectedIds.map((id) => String(id)))
|
|
|
payload.lowerMoldId = selectedIds.join(',')
|
|
|
payload.moldId = allIds.filter((id) => !selectedSet.has(String(id))).join(',')
|
|
|
} else {
|
|
|
payload.moldId = selectedIds.join(',')
|
|
|
}
|
|
|
try {
|
|
|
if (formMode.value === 'create') {
|
|
|
await createMoldOperate(payload)
|
|
|
uni.showToast({ title: t('functionCommon.createSuccess'), icon: 'success' })
|
|
|
} else {
|
|
|
await updateMoldOperate(payload)
|
|
|
uni.showToast({ title: t('functionCommon.updateSuccess'), icon: 'success' })
|
|
|
}
|
|
|
closeForm()
|
|
|
fetchList(true)
|
|
|
} catch (e) {
|
|
|
uni.showToast({ title: t('functionCommon.saveFailed'), icon: 'none' })
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function openDetail(item) {
|
|
|
if (!item?.id) {
|
|
|
uni.showToast({ title: t('functionCommon.noIdView'), icon: 'none' })
|
|
|
return
|
|
|
}
|
|
|
uni.navigateTo({
|
|
|
url: `/pages_function/pages/moldoperate/detail?id=${encodeURIComponent(String(item.id))}`
|
|
|
})
|
|
|
}
|
|
|
function removeItem(item) {
|
|
|
if (!item?.id) {
|
|
|
uni.showToast({ title: t('functionCommon.noIdDelete'), icon: 'none' })
|
|
|
return
|
|
|
}
|
|
|
uni.showModal({
|
|
|
title: t('functionCommon.confirmDelete'),
|
|
|
content: t('moldOperate.confirmDelete'),
|
|
|
success: async ({ confirm }) => {
|
|
|
if (!confirm) return
|
|
|
try {
|
|
|
await deleteMoldOperate(item.id)
|
|
|
uni.showToast({ title: t('functionCommon.deleteSuccess'), icon: 'success' })
|
|
|
fetchList(true)
|
|
|
} catch (e) {
|
|
|
uni.showToast({ title: t('functionCommon.deleteFailed'), icon: 'none' })
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
onShow(async () => {
|
|
|
await Promise.allSettled([loadMoldFilter(), loadDevices(), loadUpperMoldOptions()])
|
|
|
await fetchList(true)
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.page-container {
|
|
|
min-height: 100vh;
|
|
|
background: #f0f2f5;
|
|
|
}
|
|
|
|
|
|
.operate-tabs {
|
|
|
margin: 14rpx 24rpx 0;
|
|
|
display: flex;
|
|
|
background: #fff;
|
|
|
border-radius: 12rpx;
|
|
|
padding: 8rpx;
|
|
|
}
|
|
|
|
|
|
.operate-tab {
|
|
|
flex: 1;
|
|
|
text-align: center;
|
|
|
padding: 14rpx 0;
|
|
|
border-radius: 8rpx;
|
|
|
color: #606266;
|
|
|
}
|
|
|
|
|
|
.operate-tab.active {
|
|
|
background: #1a3a5c;
|
|
|
color: #fff;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
.search-card {
|
|
|
margin: 14rpx 24rpx 18rpx;
|
|
|
padding: 20rpx;
|
|
|
border-radius: 16rpx;
|
|
|
background: #fff;
|
|
|
}
|
|
|
|
|
|
.search-row {
|
|
|
display: flex;
|
|
|
gap: 16rpx;
|
|
|
}
|
|
|
|
|
|
.search-input-wrap {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
background: #f5f7fa;
|
|
|
border-radius: 40rpx;
|
|
|
padding: 0 20rpx;
|
|
|
}
|
|
|
|
|
|
.search-icon {
|
|
|
color: #909399;
|
|
|
}
|
|
|
|
|
|
.search-input {
|
|
|
flex: 1;
|
|
|
height: 72rpx;
|
|
|
margin-left: 12rpx;
|
|
|
}
|
|
|
|
|
|
.search-btn {
|
|
|
min-width: 120rpx;
|
|
|
height: 72rpx;
|
|
|
border-radius: 36rpx;
|
|
|
background: #1a3a5c;
|
|
|
color: #fff;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
font-size: 26rpx;
|
|
|
}
|
|
|
|
|
|
.filter-row {
|
|
|
margin-top: 16rpx;
|
|
|
display: flex;
|
|
|
gap: 14rpx;
|
|
|
}
|
|
|
|
|
|
.filter-item {
|
|
|
min-width: 220rpx;
|
|
|
padding: 12rpx 18rpx;
|
|
|
border-radius: 10rpx;
|
|
|
background: #f5f7fa;
|
|
|
color: #303133;
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
|
|
|
.list-scroll {
|
|
|
height: calc(100vh - 420rpx);
|
|
|
}
|
|
|
|
|
|
.list-wrap {
|
|
|
padding: 0 24rpx 130rpx;
|
|
|
}
|
|
|
|
|
|
.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;
|
|
|
gap: 10rpx;
|
|
|
align-items: center;
|
|
|
padding-bottom: 18rpx;
|
|
|
border-bottom: 1rpx solid #edf0f3;
|
|
|
}
|
|
|
|
|
|
.header-left {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 8rpx;
|
|
|
}
|
|
|
|
|
|
.type-name {
|
|
|
font-size: 32rpx;
|
|
|
font-weight: 700;
|
|
|
color: #1f2d3d;
|
|
|
}
|
|
|
|
|
|
.type-code {
|
|
|
font-size: 24rpx;
|
|
|
color: #8a9099;
|
|
|
}
|
|
|
|
|
|
.type-chip {
|
|
|
padding: 6rpx 16rpx;
|
|
|
border-radius: 20rpx;
|
|
|
font-size: 22rpx;
|
|
|
color: #096dd9;
|
|
|
background: rgba(24, 144, 255, 0.12);
|
|
|
}
|
|
|
|
|
|
.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: #e34d59;
|
|
|
}
|
|
|
|
|
|
.hint {
|
|
|
text-align: center;
|
|
|
color: #909399;
|
|
|
padding: 24rpx 0;
|
|
|
}
|
|
|
|
|
|
.fab-btn {
|
|
|
position: fixed;
|
|
|
right: 34rpx;
|
|
|
bottom: 120rpx;
|
|
|
width: 96rpx;
|
|
|
height: 96rpx;
|
|
|
border-radius: 50%;
|
|
|
background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
box-shadow: 0 10rpx 30rpx rgba(26, 58, 92, 0.3);
|
|
|
z-index: 20;
|
|
|
}
|
|
|
|
|
|
.go-top-btn {
|
|
|
position: fixed;
|
|
|
right: 34rpx;
|
|
|
bottom: 240rpx;
|
|
|
width: 80rpx;
|
|
|
height: 80rpx;
|
|
|
border-radius: 50%;
|
|
|
background: #fff;
|
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.form-popup {
|
|
|
background: #fff;
|
|
|
border-radius: 22rpx 22rpx 0 0;
|
|
|
max-height: 88vh;
|
|
|
}
|
|
|
|
|
|
.popup-header {
|
|
|
height: 96rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
position: relative;
|
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
}
|
|
|
|
|
|
.popup-title {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
.popup-close {
|
|
|
position: absolute;
|
|
|
right: 28rpx;
|
|
|
top: 20rpx;
|
|
|
font-size: 44rpx;
|
|
|
color: #909399;
|
|
|
}
|
|
|
|
|
|
.popup-scroll {
|
|
|
max-height: calc(88vh - 180rpx);
|
|
|
padding: 20rpx 26rpx;
|
|
|
}
|
|
|
|
|
|
.form-item {
|
|
|
margin-bottom: 18rpx;
|
|
|
}
|
|
|
|
|
|
.form-label {
|
|
|
font-size: 24rpx;
|
|
|
color: #606266;
|
|
|
margin-bottom: 8rpx;
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.required {
|
|
|
color: #f56c6c;
|
|
|
margin-right: 6rpx;
|
|
|
}
|
|
|
|
|
|
.radio-row {
|
|
|
display: flex;
|
|
|
gap: 12rpx;
|
|
|
}
|
|
|
|
|
|
.radio-item {
|
|
|
flex: 1;
|
|
|
text-align: center;
|
|
|
padding: 18rpx 0;
|
|
|
border-radius: 10rpx;
|
|
|
background: #f5f7fa;
|
|
|
color: #606266;
|
|
|
}
|
|
|
|
|
|
.radio-item.active {
|
|
|
background: rgba(26, 58, 92, 0.12);
|
|
|
color: #1a3a5c;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
.picker-view {
|
|
|
min-height: 72rpx;
|
|
|
border-radius: 12rpx;
|
|
|
background: #f5f7fa;
|
|
|
padding: 0 18rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.sub-action {
|
|
|
color: #1a3a5c;
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
|
|
|
.sub-action.block {
|
|
|
background: #f5f7fa;
|
|
|
border-radius: 10rpx;
|
|
|
padding: 18rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.item-empty {
|
|
|
padding: 20rpx;
|
|
|
color: #909399;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.selected-item {
|
|
|
margin-top: 10rpx;
|
|
|
border-radius: 12rpx;
|
|
|
background: #f8fafc;
|
|
|
padding: 14rpx;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.selected-name {
|
|
|
color: #303133;
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
|
|
|
.selected-code {
|
|
|
color: #909399;
|
|
|
font-size: 22rpx;
|
|
|
margin-top: 4rpx;
|
|
|
}
|
|
|
|
|
|
.item-remove {
|
|
|
color: #f56c6c;
|
|
|
font-size: 34rpx;
|
|
|
}
|
|
|
|
|
|
.form-textarea {
|
|
|
width: 100%;
|
|
|
min-height: 120rpx;
|
|
|
border-radius: 12rpx;
|
|
|
background: #f5f7fa;
|
|
|
padding: 14rpx 18rpx;
|
|
|
}
|
|
|
|
|
|
.popup-footer {
|
|
|
height: 88rpx;
|
|
|
display: flex;
|
|
|
}
|
|
|
|
|
|
.footer-btn {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
font-size: 28rpx;
|
|
|
}
|
|
|
|
|
|
.cancel {
|
|
|
background: #f5f7fa;
|
|
|
color: #606266;
|
|
|
}
|
|
|
|
|
|
.confirm {
|
|
|
background: #1a3a5c;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.picker-popup {
|
|
|
background: #fff;
|
|
|
border-radius: 22rpx 22rpx 0 0;
|
|
|
height: 70vh;
|
|
|
}
|
|
|
|
|
|
.picker-header {
|
|
|
height: 90rpx;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.picker-title {
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
.picker-close {
|
|
|
position: absolute;
|
|
|
right: 24rpx;
|
|
|
top: 18rpx;
|
|
|
font-size: 42rpx;
|
|
|
}
|
|
|
|
|
|
.picker-scroll {
|
|
|
height: calc(70vh - 90rpx);
|
|
|
}
|
|
|
|
|
|
.picker-item {
|
|
|
margin: 0 24rpx 12rpx;
|
|
|
padding: 16rpx;
|
|
|
border-radius: 12rpx;
|
|
|
background: #f8fafc;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.picker-item-name {
|
|
|
color: #303133;
|
|
|
font-size: 26rpx;
|
|
|
}
|
|
|
|
|
|
.picker-item-code {
|
|
|
color: #909399;
|
|
|
font-size: 22rpx;
|
|
|
margin-top: 6rpx;
|
|
|
}
|
|
|
|
|
|
.picker-check {
|
|
|
color: #1a3a5c;
|
|
|
font-size: 34rpx;
|
|
|
}
|
|
|
|
|
|
.picker-hint {
|
|
|
text-align: center;
|
|
|
color: #909399;
|
|
|
padding: 16rpx 0 22rpx;
|
|
|
}
|
|
|
</style>
|