fix: 备注样式统一修改完善。
This commit is contained in:
tianyongbao
@@ -33,8 +33,8 @@
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="备注" prop="remark" labelPosition="top">
|
||||
<u--input v-model="form.remark" placeholder="请输入备注" maxlength="500"
|
||||
inputAlign="left" :customStyle="getInputStyle('remark')"></u--input>
|
||||
<u--textarea v-model="form.remark" placeholder="请输入备注" autoHeight inputAlign="right" count
|
||||
maxlength="500" style="border: 2rpx solid #dcdfe6 !important;"></u--textarea>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
<view class="form-btn">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<view class="section">
|
||||
<view class="section-title">{{ title }}</view>
|
||||
<view class="form-view">
|
||||
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
|
||||
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="160rpx"
|
||||
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
|
||||
<u-form-item label="字典名称" prop="dictName" required>
|
||||
<u--input v-model="form.dictName" placeholder="请输入字典名称"
|
||||
@@ -20,10 +20,9 @@
|
||||
<u--input v-model="form.dictType" placeholder="请输入字典类型"
|
||||
inputAlign="left" :customStyle="getInputStyle('dictType')"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="备注" prop="remark" labelPosition="top">
|
||||
<u--input v-model="form.remark" placeholder="请输入备注" maxlength="500"
|
||||
inputAlign="left" :customStyle="getInputStyle('remark')"></u--input>
|
||||
<u--textarea v-model="form.remark" placeholder="请输入备注" autoHeight inputAlign="right" count
|
||||
maxlength="500" class="form-textarea" height="160" style="border: 2rpx solid #dcdfe6 !important;"></u--textarea>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
<view class="form-btn">
|
||||
@@ -168,6 +167,13 @@ function submit() {
|
||||
.form-view {
|
||||
padding: 24rpx;
|
||||
|
||||
.remark-count {
|
||||
text-align: right;
|
||||
font-size: 24rpx;
|
||||
color: #909399;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.form-btn {
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<view class="section">
|
||||
<view class="section-title">{{ title }}</view>
|
||||
<view class="form-view">
|
||||
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
|
||||
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="160rpx"
|
||||
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
|
||||
<u-form-item label="字典类型">
|
||||
<u--input v-model="form.dictType" disabled disabledColor="#ffffff" placeholder="字典类型"
|
||||
@@ -32,14 +32,12 @@
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="回显样式" prop="listClassName" @click="showListClassPicker = true" class="with-arrow">
|
||||
|
||||
<u--input v-model="listClassName" disabled disabledColor="#ffffff" placeholder="请选择回显样式"
|
||||
inputAlign="left" :customStyle="inputBaseStyle"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="备注" prop="remark" labelPosition="top">
|
||||
<u--input v-model="form.remark" placeholder="请输入备注" maxlength="500"
|
||||
inputAlign="left" :customStyle="getInputStyle('remark')"></u--input>
|
||||
<u--textarea v-model="form.remark" placeholder="请输入备注" autoHeight inputAlign="right" count
|
||||
maxlength="500" class="form-textarea" height="160" style="border: 2rpx solid #dcdfe6 !important;"></u--textarea>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
<view class="form-btn">
|
||||
|
||||
@@ -1,328 +0,0 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-navbar
|
||||
leftIconSize="40rpx"
|
||||
leftIconColor="#333333"
|
||||
:title="title"
|
||||
>
|
||||
</u-navbar>
|
||||
<view class="section">
|
||||
<view class="section-title">{{ title }}</view>
|
||||
<view class="form-view">
|
||||
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
|
||||
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
|
||||
<u-form-item label="任务名称" prop="jobName" required>
|
||||
<u--input v-model="form.jobName" placeholder="请输入任务名称"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="任务组名" prop="jobGroup" required>
|
||||
<u--input v-model="form.jobGroup" placeholder="请输入任务组名"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="调用目标" prop="invokeTarget" required>
|
||||
<u--input v-model="form.invokeTarget" placeholder="请输入调用目标字符串"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="cron表达式" prop="cronExpression" required>
|
||||
<u--input v-model="form.cronExpression" placeholder="请输入cron执行表达式"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="状态" prop="statusName" @click="showStatusPicker = true">
|
||||
<u--input v-model="statusName" disabled disabledColor="#ffffff" placeholder="请选择状态"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
<template #right>
|
||||
<u-icon name="arrow-down"></u-icon>
|
||||
</template>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="是否并发" prop="concurrentName" @click="showConcurrentPicker = true">
|
||||
<u--input v-model="concurrentName" disabled disabledColor="#ffffff" placeholder="请选择是否并发"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
<template #right>
|
||||
<u-icon name="arrow-down"></u-icon>
|
||||
</template>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="错失策略" prop="misfirePolicyName" @click="showMisfirePolicyPicker = true">
|
||||
<u--input v-model="misfirePolicyName" disabled disabledColor="#ffffff" placeholder="请选择错失执行策略"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
<template #right>
|
||||
<u-icon name="arrow-down"></u-icon>
|
||||
</template>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="备注" prop="remark" labelPosition="top">
|
||||
<u--textarea v-model="form.remark" placeholder="请输入备注" border="none" autoHeight inputAlign="right" count
|
||||
maxlength="500" style="padding:18rpx 0;"></u--textarea>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
<view class="form-btn">
|
||||
<u-button type="primary" text="提交" @click="submit"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<u-picker itemHeight="88" :show="showStatusPicker" :columns="statusColumns" keyName="dictLabel" @cancel="showStatusPicker = false"
|
||||
@confirm="handleStatusConfirm"></u-picker>
|
||||
<u-picker itemHeight="88" :show="showConcurrentPicker" :columns="concurrentColumns" keyName="dictLabel" @cancel="showConcurrentPicker = false"
|
||||
@confirm="handleConcurrentConfirm"></u-picker>
|
||||
<u-picker itemHeight="88" :show="showMisfirePolicyPicker" :columns="misfirePolicyColumns" keyName="dictLabel" @cancel="showMisfirePolicyPicker = false"
|
||||
@confirm="handleMisfirePolicyConfirm"></u-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, getCurrentInstance } from 'vue'
|
||||
import { getJob, addJob, updateJob } from '@/api/monitor/job'
|
||||
import { getDicts } from "@/api/system/dict/data"
|
||||
import { onLoad } from "@dcloudio/uni-app"
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const title = ref('新增定时任务')
|
||||
const jobId = ref(undefined)
|
||||
const showStatusPicker = ref(false)
|
||||
const showConcurrentPicker = ref(false)
|
||||
const showMisfirePolicyPicker = ref(false)
|
||||
const statusName = ref('')
|
||||
const concurrentName = ref('')
|
||||
const misfirePolicyName = ref('')
|
||||
const statusColumns = ref([])
|
||||
const concurrentColumns = ref([])
|
||||
const misfirePolicyColumns = ref([])
|
||||
|
||||
const form = reactive({
|
||||
jobId: undefined,
|
||||
jobName: '',
|
||||
jobGroup: '',
|
||||
invokeTarget: '',
|
||||
cronExpression: '',
|
||||
misfirePolicy: '1',
|
||||
concurrent: '1',
|
||||
status: '0',
|
||||
remark: ''
|
||||
})
|
||||
|
||||
// 表单验证错误字段
|
||||
const errorFields = ref([])
|
||||
|
||||
// 输入框基础样式
|
||||
const inputBaseStyle = {
|
||||
background: '#ffffff',
|
||||
border: '2rpx solid #dcdfe6',
|
||||
borderRadius: '8rpx',
|
||||
padding: '0 24rpx',
|
||||
height: '68rpx'
|
||||
}
|
||||
|
||||
// 输入框错误样式
|
||||
const inputErrorStyle = {
|
||||
background: '#fef0f0',
|
||||
border: '2rpx solid #f56c6c',
|
||||
borderRadius: '8rpx',
|
||||
padding: '0 24rpx',
|
||||
height: '68rpx'
|
||||
}
|
||||
|
||||
// 根据字段名获取输入框样式
|
||||
const getInputStyle = (field) => {
|
||||
return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
|
||||
}
|
||||
|
||||
const rules = {
|
||||
jobName: [
|
||||
{ required: true, message: '任务名称不能为空', trigger: ['blur', 'change'] }
|
||||
],
|
||||
jobGroup: [
|
||||
{ required: true, message: '任务组名不能为空', trigger: ['blur', 'change'] }
|
||||
],
|
||||
invokeTarget: [
|
||||
{ required: true, message: '调用目标不能为空', trigger: ['blur', 'change'] }
|
||||
],
|
||||
cronExpression: [
|
||||
{ required: true, message: 'cron表达式不能为空', trigger: ['blur', 'change'] }
|
||||
]
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
// 获取字典数据
|
||||
getDicts('sys_job_status').then(res => {
|
||||
statusColumns.value = [res.data]
|
||||
updateStatusName()
|
||||
})
|
||||
getDicts('sys_job_concurrent').then(res => {
|
||||
concurrentColumns.value = [res.data]
|
||||
updateConcurrentName()
|
||||
})
|
||||
getDicts('sys_job_policy').then(res => {
|
||||
misfirePolicyColumns.value = [res.data]
|
||||
updateMisfirePolicyName()
|
||||
})
|
||||
|
||||
if (options.id) {
|
||||
jobId.value = options.id
|
||||
title.value = '修改定时任务'
|
||||
getJob(jobId.value).then(response => {
|
||||
Object.assign(form, response.data)
|
||||
updateStatusName()
|
||||
updateConcurrentName()
|
||||
updateMisfirePolicyName()
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// 更新状态名称显示
|
||||
function updateStatusName() {
|
||||
if (statusColumns.value.length > 0 && statusColumns.value[0].length > 0) {
|
||||
const item = statusColumns.value[0].find(v => v.dictValue === form.status)
|
||||
statusName.value = item ? item.dictLabel : ''
|
||||
}
|
||||
}
|
||||
|
||||
// 更新并发名称显示
|
||||
function updateConcurrentName() {
|
||||
if (concurrentColumns.value.length > 0 && concurrentColumns.value[0].length > 0) {
|
||||
const item = concurrentColumns.value[0].find(v => v.dictValue === form.concurrent)
|
||||
concurrentName.value = item ? item.dictLabel : ''
|
||||
}
|
||||
}
|
||||
|
||||
// 更新错失策略名称显示
|
||||
function updateMisfirePolicyName() {
|
||||
if (misfirePolicyColumns.value.length > 0 && misfirePolicyColumns.value[0].length > 0) {
|
||||
const item = misfirePolicyColumns.value[0].find(v => v.dictValue === form.misfirePolicy)
|
||||
misfirePolicyName.value = item ? item.dictLabel : ''
|
||||
}
|
||||
}
|
||||
|
||||
// 状态选择确认
|
||||
function handleStatusConfirm(e) {
|
||||
form.status = e.value[0].dictValue
|
||||
statusName.value = e.value[0].dictLabel
|
||||
showStatusPicker.value = false
|
||||
}
|
||||
|
||||
// 并发选择确认
|
||||
function handleConcurrentConfirm(e) {
|
||||
form.concurrent = e.value[0].dictValue
|
||||
concurrentName.value = e.value[0].dictLabel
|
||||
showConcurrentPicker.value = false
|
||||
}
|
||||
|
||||
// 错失策略选择确认
|
||||
function handleMisfirePolicyConfirm(e) {
|
||||
form.misfirePolicy = e.value[0].dictValue
|
||||
misfirePolicyName.value = e.value[0].dictLabel
|
||||
showMisfirePolicyPicker.value = false
|
||||
}
|
||||
|
||||
// 提交
|
||||
function submit() {
|
||||
errorFields.value = [] // 清空错误字段
|
||||
proxy.$refs['uForm'].validate().then(() => {
|
||||
const submitForm = { ...form }
|
||||
if (jobId.value) {
|
||||
updateJob(submitForm).then(() => {
|
||||
proxy.$refs['uToast'].show({
|
||||
message: '修改成功', complete() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
addJob(submitForm).then(() => {
|
||||
proxy.$refs['uToast'].show({
|
||||
message: '新增成功', complete() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}).catch((errors) => {
|
||||
// 记录验证失败的字段
|
||||
if (errors && Array.isArray(errors)) {
|
||||
errorFields.value = errors.map(err => err.field || err.prop)
|
||||
}
|
||||
proxy.$refs['uToast'].show({
|
||||
type: 'error',
|
||||
message: '请填写完整信息'
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin: 24rpx;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
|
||||
.section-title {
|
||||
padding: 16rpx 24rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #ffffff;
|
||||
line-height: 1.2;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 3rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.form-view {
|
||||
padding: 24rpx;
|
||||
|
||||
.form-btn {
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-input-wrapper {
|
||||
position: relative;
|
||||
|
||||
.select-arrow {
|
||||
position: absolute;
|
||||
right: 24rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #c0c4cc;
|
||||
font-size: 28rpx;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.form-btn .u-button {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||||
border: none !important;
|
||||
border-radius: 24rpx !important;
|
||||
height: 80rpx !important;
|
||||
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
|
||||
}
|
||||
|
||||
.form-btn .u-button__text {
|
||||
font-size: 30rpx !important;
|
||||
font-weight: 500 !important;
|
||||
letter-spacing: 2rpx !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,282 +0,0 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-navbar
|
||||
leftIconSize="40rpx"
|
||||
leftIconColor="#333333"
|
||||
title="任务详情"
|
||||
>
|
||||
</u-navbar>
|
||||
|
||||
<view class="detail-card" v-if="jobData">
|
||||
<view class="card-header">
|
||||
<view class="header-icon">
|
||||
<uni-icons type="calendar" size="24" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="header-info">
|
||||
<text class="card-name">{{ jobData.jobName }}</text>
|
||||
</view>
|
||||
<view class="status-tag" :class="jobData.status === '0' ? 'status-normal' : 'status-disabled'">
|
||||
{{ dictStr(jobData.status, statusList) }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-body">
|
||||
<view class="info-section">
|
||||
<view class="section-title">
|
||||
<view class="title-icon"></view>
|
||||
<text>基本信息</text>
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="list-item">
|
||||
<text class="item-label">任务编号</text>
|
||||
<text class="item-value">{{ jobData.jobId }}</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">任务名称</text>
|
||||
<text class="item-value">{{ jobData.jobName }}</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">任务组名</text>
|
||||
<text class="item-value">{{ jobData.jobGroup }}</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">调用目标</text>
|
||||
<text class="item-value">{{ jobData.invokeTarget }}</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">cron表达式</text>
|
||||
<text class="item-value">{{ jobData.cronExpression }}</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">错失执行策略</text>
|
||||
<text class="item-value">{{ dictStr(jobData.misfirePolicy, misfirePolicyList) }}</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">是否并发</text>
|
||||
<text class="item-value">{{ dictStr(jobData.concurrent, concurrentList) }}</text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text class="item-label">创建者</text>
|
||||
<text class="item-value">{{ jobData.createBy }}</text>
|
||||
</view>
|
||||
<view class="list-item" v-if="jobData.createTime">
|
||||
<text class="item-label">创建时间</text>
|
||||
<text class="item-value">{{ jobData.createTime }}</text>
|
||||
</view>
|
||||
<view class="list-item" v-if="jobData.updateTime && jobData.updateTime !== jobData.createTime">
|
||||
<text class="item-label">更新时间</text>
|
||||
<text class="item-value">{{ jobData.updateTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-section" v-if="jobData.remark">
|
||||
<view class="section-title">
|
||||
<view class="title-icon"></view>
|
||||
<text>备注</text>
|
||||
</view>
|
||||
<view class="remark-content">
|
||||
<text>{{ jobData.remark }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, toRefs, computed } from 'vue'
|
||||
import { getJob } from '@/api/monitor/job'
|
||||
import { getDicts } from "@/api/system/dict/data"
|
||||
import { onLoad } from "@dcloudio/uni-app"
|
||||
|
||||
const jobId = ref(undefined)
|
||||
const statusList = ref([])
|
||||
const concurrentList = ref([])
|
||||
const misfirePolicyList = ref([])
|
||||
const data = reactive({
|
||||
jobData: null
|
||||
})
|
||||
const { jobData } = toRefs(data)
|
||||
|
||||
onLoad((options) => {
|
||||
if (options.id) {
|
||||
jobId.value = options.id
|
||||
getJob(jobId.value).then(response => {
|
||||
jobData.value = response.data
|
||||
})
|
||||
}
|
||||
|
||||
// 获取字典数据
|
||||
getDicts('sys_job_status').then(res => {
|
||||
statusList.value = res.data
|
||||
})
|
||||
getDicts('sys_job_concurrent').then(res => {
|
||||
concurrentList.value = res.data
|
||||
})
|
||||
getDicts('sys_job_policy').then(res => {
|
||||
misfirePolicyList.value = res.data
|
||||
})
|
||||
})
|
||||
|
||||
// 字典翻译
|
||||
function dictStr(value, list) {
|
||||
const item = list.find(v => v.dictValue === value)
|
||||
return item ? item.dictLabel : value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
background: #f5f7fa;
|
||||
padding-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
margin: 24rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 20rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
|
||||
.header-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12rpx;
|
||||
backdrop-filter: blur(10rpx);
|
||||
}
|
||||
|
||||
.header-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.card-name {
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
|
||||
&.status-normal {
|
||||
background-color: rgba(82, 196, 26, 0.2);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&.status-disabled {
|
||||
background-color: rgba(255, 77, 79, 0.2);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.title-icon {
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 3rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
color: #2c3e50;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.info-list {
|
||||
.list-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
color: #7f8c8d;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
color: #2c3e50;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
|
||||
&.status-normal {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
&.status-disabled {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
&.status-default {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.remark-content {
|
||||
padding: 20rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8rpx;
|
||||
|
||||
text {
|
||||
color: #2c3e50;
|
||||
font-size: 26rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,656 +0,0 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||
<view class="search-view">
|
||||
<u--input v-model="queryParams.jobName" border="false" placeholder="请输入任务名称" class="search-input"
|
||||
@blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
|
||||
</u--input>
|
||||
<view class="filter-btn" @click="filterPanel = !filterPanel">
|
||||
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
|
||||
<text>筛选</text>
|
||||
</view>
|
||||
<view class="add-btn" @click="handleAdd()">
|
||||
<uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
|
||||
<text>新增</text>
|
||||
</view>
|
||||
<u-transition :show="filterPanel" mode="fade">
|
||||
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
||||
<view class="filter-panel-content">
|
||||
<view class="filter-title">任务组名</view>
|
||||
<u--input v-model="queryParams.jobGroup" placeholder="请输入任务组名" border="surround"></u--input>
|
||||
|
||||
<view class="filter-title">任务状态</view>
|
||||
<view class="state-list">
|
||||
<view v-for="item in statusList" :key="item.dictValue" class="state-item"
|
||||
:class="item.selected ? 'active' : ''" @click="selectStatus(item)">{{ item.dictLabel }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-box">
|
||||
<view class="btn-reset" @click="resetQuery()">
|
||||
<uni-icons type="reload" size="16" color="#909399"></uni-icons>
|
||||
<text>重置</text>
|
||||
</view>
|
||||
<view class="btn-confirm" @click="searchSubmit()">
|
||||
<uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
||||
<text>确定</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
|
||||
<u-list-item v-for="(item, index) in listData" :key="index">
|
||||
<view class="list-item" @click="enterDetails(item)">
|
||||
<view class="item-header">
|
||||
<view class="card-name-section">
|
||||
<view class="card-icon">
|
||||
<uni-icons type="calendar" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<text class="card-name">{{ item.jobName }}<text class="card-code" v-if="item.jobGroup">({{ item.jobGroup }})</text></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="balance-section">
|
||||
<view class="status-tag" :class="item.status === '0' ? 'status-normal' : 'status-disabled'">
|
||||
{{ dictStr(item.status, statusList) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-body">
|
||||
<view class="info-row">
|
||||
<view class="info-item">
|
||||
<text class="info-label">调用目标</text>
|
||||
<text class="info-value">{{ item.invokeTarget }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">cron表达式</text>
|
||||
<text class="info-value">{{ item.cronExpression }}</text>
|
||||
</view>
|
||||
<view class="info-item" v-if="item.createTime">
|
||||
<text class="info-label">创建时间</text>
|
||||
<text class="info-value">{{ item.createTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="operate" @click.stop>
|
||||
<view class="btn-run" @click="handleRun(item)">
|
||||
<uni-icons type="play" size="16" color="#52c41a"></uni-icons>
|
||||
<text>执行</text>
|
||||
</view>
|
||||
<view class="btn-start" v-if="item.status === '1'" @click="handleStart(item)">
|
||||
<uni-icons type="play" size="16" color="#52c41a"></uni-icons>
|
||||
<text>启动</text>
|
||||
</view>
|
||||
<view class="btn-stop" v-if="item.status === '0'" @click="handleStop(item)">
|
||||
<uni-icons type="pause" size="16" color="#ff4d4f"></uni-icons>
|
||||
<text>停止</text>
|
||||
</view>
|
||||
<view class="btn-edit" @click="handleUpdate(item)">
|
||||
<uni-icons type="compose" size="16" color="#667eea"></uni-icons>
|
||||
<text>修改</text>
|
||||
</view>
|
||||
<view class="btn-delete" @click="handleDelete(item)">
|
||||
<uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
|
||||
<text>删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-list-item>
|
||||
<view></view>
|
||||
<u-loadmore :status="loadStatus" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
|
||||
</u-list>
|
||||
</view>
|
||||
<suspend></suspend>
|
||||
<refresh></refresh>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from 'vue'
|
||||
import { listJob, delJob, runJob, startJob, stopJob } from '@/api/monitor/job'
|
||||
import { getDicts } from "@/api/system/dict/data"
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app"
|
||||
import modal from '@/plugins/modal'
|
||||
|
||||
const pageNum = ref(1)
|
||||
const listData = ref([])
|
||||
const isShow = ref(false)
|
||||
const loadStatus = ref('loadmore')
|
||||
const statusList = ref([])
|
||||
const filterPanel = ref(false)
|
||||
|
||||
const queryParams = reactive({
|
||||
jobName: undefined,
|
||||
jobGroup: undefined,
|
||||
status: undefined
|
||||
})
|
||||
|
||||
const windowHeight = computed(() => {
|
||||
uni.getSystemInfoSync().windowHeight - 50
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
getDicts('sys_job_status').then(res => {
|
||||
statusList.value = res.data.map(item => ({
|
||||
...item,
|
||||
selected: false
|
||||
}))
|
||||
})
|
||||
getList()
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
if (isShow.value) {
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
getList()
|
||||
isShow.value = false
|
||||
}
|
||||
})
|
||||
|
||||
// 获取列表
|
||||
function getList() {
|
||||
loadStatus.value = 'loading'
|
||||
listJob({ pageSize: 10, pageNum: pageNum.value, ...queryParams }).then(res => {
|
||||
listData.value = listData.value.concat(res.rows)
|
||||
if (listData.value.length < res.total) {
|
||||
loadStatus.value = 'loadmore'
|
||||
} else {
|
||||
loadStatus.value = 'nomore'
|
||||
}
|
||||
}).catch(() => {
|
||||
loadStatus.value = 'nomore'
|
||||
})
|
||||
}
|
||||
|
||||
// 搜索框失焦
|
||||
function searchBlur() {
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
// 选择状态
|
||||
function selectStatus(item) {
|
||||
statusList.value.forEach(v => v.selected = false)
|
||||
item.selected = !item.selected
|
||||
queryParams.status = item.dictValue
|
||||
}
|
||||
|
||||
// 搜索提交
|
||||
function searchSubmit() {
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
filterPanel.value = false
|
||||
getList()
|
||||
}
|
||||
|
||||
// 重置查询
|
||||
function resetQuery() {
|
||||
queryParams.jobName = undefined
|
||||
queryParams.jobGroup = undefined
|
||||
queryParams.status = undefined
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
statusList.value.forEach(v => v.selected = false)
|
||||
filterPanel.value = false
|
||||
getList()
|
||||
}
|
||||
|
||||
// 上拉加载
|
||||
function loadmore() {
|
||||
pageNum.value += 1
|
||||
if (loadStatus.value == 'loadmore') {
|
||||
getList()
|
||||
}
|
||||
}
|
||||
|
||||
// 新增
|
||||
function handleAdd() {
|
||||
isShow.value = true
|
||||
uni.navigateTo({
|
||||
url: '/pages_mine/pages/system/job/addEdit'
|
||||
})
|
||||
}
|
||||
|
||||
// 编辑
|
||||
function handleUpdate(row) {
|
||||
isShow.value = true
|
||||
uni.navigateTo({
|
||||
url: `/pages_mine/pages/system/job/addEdit?id=${row.jobId}`
|
||||
})
|
||||
}
|
||||
|
||||
// 删除
|
||||
function handleDelete(row) {
|
||||
modal.confirm('是否确认删除定时任务编号为"' + row.jobId + '"的数据项？').then(() => {
|
||||
return delJob(row.jobId)
|
||||
}).then(() => {
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
getList()
|
||||
modal.msgSuccess('删除成功')
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 执行一次
|
||||
function handleRun(row) {
|
||||
modal.confirm('确认要立即执行一次"' + row.jobName + '"任务吗？').then(() => {
|
||||
return runJob(row.jobId, row.jobGroup)
|
||||
}).then(() => {
|
||||
modal.msgSuccess('执行成功')
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 启动任务
|
||||
function handleStart(row) {
|
||||
modal.confirm('确认要启动"' + row.jobName + '"任务吗？').then(() => {
|
||||
return startJob(row.jobId, row.jobGroup)
|
||||
}).then(() => {
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
getList()
|
||||
modal.msgSuccess('启动成功')
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 停止任务
|
||||
function handleStop(row) {
|
||||
modal.confirm('确认要停止"' + row.jobName + '"任务吗？').then(() => {
|
||||
return stopJob(row.jobId, row.jobGroup)
|
||||
}).then(() => {
|
||||
listData.value = []
|
||||
pageNum.value = 1
|
||||
getList()
|
||||
modal.msgSuccess('停止成功')
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 进入详情
|
||||
function enterDetails(row) {
|
||||
isShow.value = true
|
||||
uni.navigateTo({
|
||||
url: `/pages_mine/pages/system/job/details?id=${row.jobId}`
|
||||
})
|
||||
}
|
||||
|
||||
// 字典翻译
|
||||
function dictStr(value, list) {
|
||||
const item = list.find(v => v.dictValue === value)
|
||||
return item ? item.dictLabel : value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.search-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 24rpx;
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
|
||||
.search-input {
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
margin-right: 16rpx;
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
height: 66rpx !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
background: rgba(102, 126, 234, 0.12);
|
||||
}
|
||||
|
||||
text {
|
||||
color: #667eea;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
uni-icons {
|
||||
color: #667eea;
|
||||
}
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
margin-left: 10rpx;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
background: rgba(102, 126, 234, 0.12);
|
||||
}
|
||||
|
||||
text {
|
||||
color: #667eea;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
uni-icons {
|
||||
color: #667eea;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-panel {
|
||||
position: absolute;
|
||||
top: 100rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #ffffff;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||||
|
||||
.filter-panel-content {
|
||||
flex: 1;
|
||||
padding: 32rpx;
|
||||
overflow-y: auto;
|
||||
|
||||
.filter-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin: 32rpx 0 24rpx 0;
|
||||
color: #303133;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.state-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
|
||||
.state-item {
|
||||
padding: 16rpx 32rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 32rpx;
|
||||
font-size: 28rpx;
|
||||
color: #606266;
|
||||
|
||||
&.active {
|
||||
background-color: #667eea;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
display: flex;
|
||||
padding: 24rpx 32rpx;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
|
||||
.btn-reset,
|
||||
.btn-confirm {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20rpx 0;
|
||||
border-radius: 32rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
text {
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-reset {
|
||||
background-color: #f5f5f5;
|
||||
color: #909399;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-item {
|
||||
margin: 10rpx 24rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 24rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
|
||||
.card-name-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
|
||||
.card-name {
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card-code {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 22rpx;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.balance-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
.status-tag {
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
|
||||
&.status-normal {
|
||||
background-color: rgba(82, 196, 26, 0.2);
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
&.status-disabled {
|
||||
background-color: rgba(255, 77, 79, 0.15);
|
||||
color: #ff4d4f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 24rpx;
|
||||
background: #fafbfc;
|
||||
border: 2rpx solid #f0f2f5;
|
||||
margin: 15rpx 16rpx 2rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 0;
|
||||
|
||||
.info-item {
|
||||
flex: 0 0 calc(50% - 12rpx);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
min-width: 0;
|
||||
margin-bottom: -5rpx;
|
||||
|
||||
&.info-item-full {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 24rpx;
|
||||
color: #667eea;
|
||||
font-weight: 500;
|
||||
background: rgba(102, 126, 234, 0.08);
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
flex: 1;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
&:not(.info-item-full) .info-value {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.operate {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 16rpx 24rpx 24rpx;
|
||||
gap: 8rpx;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.btn-run,
|
||||
.btn-start,
|
||||
.btn-stop,
|
||||
.btn-edit,
|
||||
.btn-delete {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4rpx;
|
||||
padding: 0 14rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-run {
|
||||
background: rgba(82, 196, 26, 0.1);
|
||||
color: #52c41a;
|
||||
border: 1rpx solid rgba(82, 196, 26, 0.3);
|
||||
}
|
||||
|
||||
.btn-start {
|
||||
background: rgba(82, 196, 26, 0.1);
|
||||
color: #52c41a;
|
||||
border: 1rpx solid rgba(82, 196, 26, 0.3);
|
||||
}
|
||||
|
||||
.btn-stop {
|
||||
background: rgba(255, 77, 79, 0.1);
|
||||
color: #ff4d4f;
|
||||
border: 1rpx solid rgba(255, 77, 79, 0.3);
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
color: #667eea;
|
||||
border: 1rpx solid rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background: rgba(245, 87, 108, 0.1);
|
||||
color: #f5576c;
|
||||
border: 1rpx solid rgba(245, 87, 108, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -31,8 +31,8 @@
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="备注" prop="remark" labelPosition="top">
|
||||
<u--input v-model="form.remark" placeholder="请输入备注" maxlength="500"
|
||||
inputAlign="left" :customStyle="getInputStyle('remark')"></u--input>
|
||||
<u--textarea v-model="form.remark" placeholder="请输入备注" autoHeight inputAlign="right" count
|
||||
maxlength="500" style="border: 2rpx solid #dcdfe6 !important;"></u--textarea>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
<view class="form-btn">
|
||||
|
||||
@@ -32,8 +32,8 @@
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="备注" prop="remark" labelPosition="top">
|
||||
<u--input v-model="form.remark" placeholder="请输入备注" maxlength="500"
|
||||
inputAlign="left" :customStyle="getInputStyle('remark')"></u--input>
|
||||
<u--textarea v-model="form.remark" placeholder="请输入备注" autoHeight inputAlign="right" count
|
||||
maxlength="500" style="border: 2rpx solid #dcdfe6 !important;"></u--textarea>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="菜单权限" @click="openMenuPicker" class="with-arrow">
|
||||
|
||||
@@ -82,8 +82,8 @@
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="备注" prop="remark" labelPosition="top">
|
||||
<u--input v-model="form.remark" placeholder="请输入备注" maxlength="300"
|
||||
inputAlign="left" :customStyle="getInputStyle('remark')"></u--input>
|
||||
<u--textarea v-model="form.remark" placeholder="请输入备注" autoHeight inputAlign="right" count
|
||||
maxlength="500" style="border: 2rpx solid #dcdfe6 !important;"></u--textarea>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
<view class="form-btn">
|
||||
@@ -511,18 +511,6 @@ function submit() {
|
||||
.form-view {
|
||||
padding: 24rpx;
|
||||
|
||||
.remark-textarea {
|
||||
width: 100%;
|
||||
min-height: 160rpx;
|
||||
background: #ffffff;
|
||||
border: 2rpx solid #dcdfe6;
|
||||
border-radius: 8rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.remark-count {
|
||||
text-align: right;
|
||||
font-size: 24rpx;
|
||||
@@ -692,41 +680,4 @@ function submit() {
|
||||
letter-spacing: 2rpx !important;
|
||||
}
|
||||
|
||||
/* 统一输入框宽度 */
|
||||
.u-form-item__body {
|
||||
flex: 1 !important;
|
||||
}
|
||||
|
||||
.u-form-item__body .u--input {
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
// 备注框样式
|
||||
.remark-textarea {
|
||||
width: 100% !important;
|
||||
min-height: 160rpx !important;
|
||||
background: #ffffff !important;
|
||||
border: 2rpx solid #dcdfe6 !important;
|
||||
border-radius: 8rpx !important;
|
||||
padding: 20rpx !important;
|
||||
box-sizing: border-box !important;
|
||||
font-size: 28rpx !important;
|
||||
line-height: 1.5 !important;
|
||||
}
|
||||
|
||||
/* 强制让错误状态的输入框边框变红 */
|
||||
.u-form-item--error .u--input,
|
||||
.u-form-item--error .u-input,
|
||||
.u-form-item--error .u-input__content,
|
||||
.u-form-item--error .u-input__content__field-wrapper {
|
||||
border: 2rpx solid #f56c6c !important;
|
||||
background: #fef0f0 !important;
|
||||
}
|
||||
|
||||
.u-form-item--error .u--textarea,
|
||||
.u-form-item--error .u-textarea {
|
||||
border: 2rpx solid #f56c6c !important;
|
||||
background: #fef0f0 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user