mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-28 03:09:24 +08:00
721 lines
21 KiB
Vue
721 lines
21 KiB
Vue
|
<!-- item.type:xxxx-unshow:表示不显示 items.displayFlag为false表示不展示卡片 -->
|
|||
|
|
<template>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<a-card
|
|||
|
|
style="margin: 0 0 15px 0; text-align: left"
|
|||
|
|
>
|
|||
|
|
<div :class="['info-title', items.title ? '' : 'title-none']">
|
|||
|
|
<div class="box">
|
|||
|
|
|
|||
|
|
<div >
|
|||
|
|
{{ items.title ? items.title : '基础信息' }}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<a-tooltip
|
|||
|
|
placement="bottomLeft"
|
|||
|
|
trigger="['hover','click']"
|
|||
|
|
:overlay-style="{ color: '#ccc' }"
|
|||
|
|
v-if="items.tooltip && items.tooltip !== ''"
|
|||
|
|
>
|
|||
|
|
<template #title>
|
|||
|
|
<!-- -->
|
|||
|
|
<span v-html="items.tooltip"></span>
|
|||
|
|
</template>
|
|||
|
|
<ExclamationCircleOutlined
|
|||
|
|
:style="{
|
|||
|
|
fontSize: '18px',
|
|||
|
|
color: 'var(--theme-text3)',
|
|||
|
|
cursor: 'pointer',
|
|||
|
|
position: 'relative',
|
|||
|
|
top: '0',
|
|||
|
|
left: '15px'
|
|||
|
|
}"
|
|||
|
|
/>
|
|||
|
|
</a-tooltip>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-content">
|
|||
|
|
<a-form
|
|||
|
|
layout="horizontal"
|
|||
|
|
:wrap="true"
|
|||
|
|
ref="formRef"
|
|||
|
|
:rules="props.formRules"
|
|||
|
|
name="info-form"
|
|||
|
|
class="info-form"
|
|||
|
|
label-align="left"
|
|||
|
|
:model="propsInfo.ruleForm.value"
|
|||
|
|
@submit="handleSubmit"
|
|||
|
|
@onFieldsChange="onFieldsChange"
|
|||
|
|
>
|
|||
|
|
<template v-for="item in items.list">
|
|||
|
|
<div
|
|||
|
|
v-if="item.type !== 'unshow'"
|
|||
|
|
:key="item.key"
|
|||
|
|
:class="item.className ? [item.className, 'item-div'] : 'item-div'"
|
|||
|
|
>
|
|||
|
|
<a-form-item
|
|||
|
|
:label="item.label"
|
|||
|
|
:name="item.key"
|
|||
|
|
:class="[item.colStatus || item.type === 'table' ? 'item-width' : 'form-item']"
|
|||
|
|
:tooltip="item.tooltip ? item.tooltip : ''"
|
|||
|
|
>
|
|||
|
|
<a-input-password
|
|||
|
|
v-if="item.type === 'input-password'"
|
|||
|
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
|||
|
|
:placeholder="'请输入' + item.label"
|
|||
|
|
:disabled="!props.disabled && type ? !!item.disabled : props.disabled"
|
|||
|
|
/>
|
|||
|
|
<a-input
|
|||
|
|
v-if="item.type === 'input'"
|
|||
|
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
|||
|
|
:type="item.inputType"
|
|||
|
|
:placeholder="'请输入' + item.label"
|
|||
|
|
:disabled="!props.disabled && type ? !!item.disabled : props.disabled"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<a-input-number
|
|||
|
|
v-if="item.type == 'input-number'"
|
|||
|
|
id="inputNumber"
|
|||
|
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
|||
|
|
:min="item.min || 0"
|
|||
|
|
:max="item.max || 10000000"
|
|||
|
|
:formatter="item.formatter || null"
|
|||
|
|
:addon-before="item.addonBefore"
|
|||
|
|
:disabled="props.disabled"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<a-date-picker
|
|||
|
|
v-if="item.type === 'date-picker'"
|
|||
|
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
|||
|
|
:placeholder="'请输入' + item.label"
|
|||
|
|
:disabled="props.disabled"
|
|||
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<a-date-picker
|
|||
|
|
show-time
|
|||
|
|
v-if="item.type === 'time'"
|
|||
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|||
|
|
:disabled="props.disabled"
|
|||
|
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
|||
|
|
:placeholder="'请输入' + item.label"
|
|||
|
|
/>
|
|||
|
|
<a-range-picker
|
|||
|
|
v-if="item.type === 'date-time'"
|
|||
|
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
|||
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|||
|
|
:disabled="props.disabled"
|
|||
|
|
show-time
|
|||
|
|
/>
|
|||
|
|
<a-time-range-picker
|
|||
|
|
v-if="item.type === 'timeRangePicker'"
|
|||
|
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
|||
|
|
value-format="HH:mm"
|
|||
|
|
format="HH:mm"
|
|||
|
|
:disabled="props.disabled"
|
|||
|
|
/>
|
|||
|
|
<a-time-picker
|
|||
|
|
v-if="item.type === 'timePicker'"
|
|||
|
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
|||
|
|
value-format="HH:mm"
|
|||
|
|
format="HH:mm"
|
|||
|
|
:disabled="props.disabled"
|
|||
|
|
/>
|
|||
|
|
<a-textarea
|
|||
|
|
v-if="item.type === 'textarea'"
|
|||
|
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
|||
|
|
:placeholder="'请输入' + item.label"
|
|||
|
|
allow-clear
|
|||
|
|
:disabled="!props.disabled && type ? !!item.disabled : props.disabled"
|
|||
|
|
:auto-size="item.autoSize ? item.autoSize : { minRows: 3, maxRows: 10 }"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<a-select
|
|||
|
|
:dropdown-match-select-width="false"
|
|||
|
|
v-if="item.type === 'select'"
|
|||
|
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
|||
|
|
:placeholder="'请选择' + item.label"
|
|||
|
|
:disabled="!props.disabled && type ? !!item.disabled : props.disabled"
|
|||
|
|
allow-clear
|
|||
|
|
>
|
|||
|
|
<a-select-option
|
|||
|
|
:value="selectItem.value"
|
|||
|
|
v-for="selectItem in item.list"
|
|||
|
|
:key="selectItem.value"
|
|||
|
|
>
|
|||
|
|
{{ selectItem.label }}
|
|||
|
|
</a-select-option>
|
|||
|
|
</a-select>
|
|||
|
|
<!-- 下拉多选 -->
|
|||
|
|
<a-select
|
|||
|
|
:dropdown-match-select-width="false"
|
|||
|
|
v-if="item.type === 'selectMultiple'"
|
|||
|
|
mode="multiple"
|
|||
|
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
|||
|
|
:placeholder="'请选择' + item.label"
|
|||
|
|
:disabled="!props.disabled && type ? !!item.disabled : props.disabled"
|
|||
|
|
allow-clear
|
|||
|
|
>
|
|||
|
|
<a-select-option
|
|||
|
|
:value="selectItem.value"
|
|||
|
|
v-for="selectItem in item.list"
|
|||
|
|
:key="selectItem.value"
|
|||
|
|
>
|
|||
|
|
{{ selectItem.label }}
|
|||
|
|
</a-select-option>
|
|||
|
|
</a-select>
|
|||
|
|
<!-- 新增时disabled -->
|
|||
|
|
<a-select
|
|||
|
|
:dropdown-match-select-width="false"
|
|||
|
|
v-if="item.type === 'select-disabled'"
|
|||
|
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
|||
|
|
:placeholder="'请选择' + item.label"
|
|||
|
|
:disabled="!props.disabled ? item.disabled : props.disabled"
|
|||
|
|
allow-clear
|
|||
|
|
>
|
|||
|
|
<a-select-option
|
|||
|
|
:value="selectItem.value"
|
|||
|
|
v-for="selectItem in item.list"
|
|||
|
|
:key="selectItem.value"
|
|||
|
|
>
|
|||
|
|
{{ selectItem.label }}
|
|||
|
|
</a-select-option>
|
|||
|
|
</a-select>
|
|||
|
|
<!-- 下拉展示icon -->
|
|||
|
|
<a-select
|
|||
|
|
v-if="item.type === 'icon-select'"
|
|||
|
|
:get-popup-container="(triggerNode) => triggerNode.parentNode"
|
|||
|
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
|||
|
|
allow-clear
|
|||
|
|
option-label-prop="children"
|
|||
|
|
>
|
|||
|
|
<a-select-option
|
|||
|
|
v-for="icon in iconList"
|
|||
|
|
:key="icon.icon_id"
|
|||
|
|
:value="`icon-${icon.font_class}`"
|
|||
|
|
>
|
|||
|
|
<i
|
|||
|
|
class="iconfont"
|
|||
|
|
:class="`icon-${icon.font_class}`"
|
|||
|
|
style="margin-right: 8px"
|
|||
|
|
></i>
|
|||
|
|
<span> {{ icon.name }} </span>
|
|||
|
|
</a-select-option>
|
|||
|
|
</a-select>
|
|||
|
|
|
|||
|
|
<a-switch
|
|||
|
|
v-if="item.type === 'switch'"
|
|||
|
|
v-model:checked="propsInfo.ruleForm.value[item.key]"
|
|||
|
|
style="margin-bottom: 5px"
|
|||
|
|
:disabled="!props.disabled && type ? !!item.disabled : props.disabled"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<a-radio-group
|
|||
|
|
name="radioGroup"
|
|||
|
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
|||
|
|
v-if="item.type === 'radio'"
|
|||
|
|
:disabled="props.disabled"
|
|||
|
|
>
|
|||
|
|
<a-radio
|
|||
|
|
:value="radioItem.value"
|
|||
|
|
v-for="radioItem in item.list"
|
|||
|
|
:key="radioItem.value"
|
|||
|
|
>
|
|||
|
|
{{ radioItem.label }}
|
|||
|
|
</a-radio>
|
|||
|
|
</a-radio-group>
|
|||
|
|
|
|||
|
|
<a-tree-select
|
|||
|
|
:disabled="props.disabled"
|
|||
|
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
|||
|
|
v-if="item.type === 'tree-radio'"
|
|||
|
|
style="width: 100%"
|
|||
|
|
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
|||
|
|
:tree-data="item.list"
|
|||
|
|
:placeholder="'请选择' + item.label"
|
|||
|
|
:field-names="
|
|||
|
|
item.replaceFields
|
|||
|
|
? item.replaceFields
|
|||
|
|
: {
|
|||
|
|
children: 'children',
|
|||
|
|
title: 'title',
|
|||
|
|
key: 'key',
|
|||
|
|
value: 'value'
|
|||
|
|
}
|
|||
|
|
"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<a-tree-select
|
|||
|
|
:allow-clear="true"
|
|||
|
|
:disabled="props.disabled"
|
|||
|
|
v-if="item.type === 'tree-check'"
|
|||
|
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
|||
|
|
style="width: 100%"
|
|||
|
|
:tree-data="item.list"
|
|||
|
|
:tree-checkable="true"
|
|||
|
|
:show-checked-strategy="SHOW_PARENT"
|
|||
|
|
:placeholder="'请选择' + item.label"
|
|||
|
|
:field-names="
|
|||
|
|
item.replaceFields
|
|||
|
|
? item.replaceFields
|
|||
|
|
: {
|
|||
|
|
children: 'children',
|
|||
|
|
title: 'title',
|
|||
|
|
key: 'key',
|
|||
|
|
value: 'value'
|
|||
|
|
}
|
|||
|
|
"
|
|||
|
|
:check="checkTree"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<a-tree-select
|
|||
|
|
:allow-clear="true"
|
|||
|
|
:disabled="props.disabled"
|
|||
|
|
v-if="item.type === 'tree-check-org'"
|
|||
|
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
|||
|
|
style="width: 100%"
|
|||
|
|
:tree-data="item.list"
|
|||
|
|
allow-clear
|
|||
|
|
multiple
|
|||
|
|
tree-default-expand-all
|
|||
|
|
:placeholder="'请选择' + item.label"
|
|||
|
|
:field-names="
|
|||
|
|
item.replaceFields
|
|||
|
|
? item.replaceFields
|
|||
|
|
: {
|
|||
|
|
children: 'children',
|
|||
|
|
title: 'title',
|
|||
|
|
key: 'key',
|
|||
|
|
value: 'value'
|
|||
|
|
}
|
|||
|
|
"
|
|||
|
|
:check="checkTree"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<a-cascader
|
|||
|
|
:disabled="props.disabled"
|
|||
|
|
v-if="item.type === 'cascader'"
|
|||
|
|
:options="item.list"
|
|||
|
|
:field-names="
|
|||
|
|
item.fieldNames
|
|||
|
|
? item.fieldNames
|
|||
|
|
: { label: 'label', value: 'value', children: 'children' }
|
|||
|
|
"
|
|||
|
|
:show-search="{ filter }"
|
|||
|
|
:placeholder="'请选择' + item.label"
|
|||
|
|
v-model:value="propsInfo.ruleForm.value[item.key]"
|
|||
|
|
change-on-select
|
|||
|
|
>
|
|||
|
|
</a-cascader>
|
|||
|
|
|
|||
|
|
<a-checkbox
|
|||
|
|
v-if="item.type === 'checkbox'"
|
|||
|
|
v-model:checked="propsInfo.ruleForm.value[item.key]"
|
|||
|
|
>
|
|||
|
|
</a-checkbox>
|
|||
|
|
<div v-if="item.type === 'tag'" class="table-css">
|
|||
|
|
<a-tag :color="propsInfo.ruleForm.value[item.key] ? 'green' : 'red'">
|
|||
|
|
{{ item.list[propsInfo.ruleForm.value[item.key]] }}
|
|||
|
|
</a-tag>
|
|||
|
|
</div>
|
|||
|
|
<!-- </a-col>-->
|
|||
|
|
|
|||
|
|
<!-- <a-button v-if="item.type === 'btn'" @click="btnClick(item)">{{ item.title }}</a-button> -->
|
|||
|
|
<div v-if="item.type === 'table'" class="table-css">
|
|||
|
|
<slot :name="item.type" v-bind="item"></slot>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div v-if="item.type === 'treetable'" class="table-css">
|
|||
|
|
<slot :name="item.type" v-bind="item"></slot>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div v-if="item.type === 'slot'">
|
|||
|
|
<slot
|
|||
|
|
:name="item.slotName"
|
|||
|
|
v-bind="{ ...item, ...propsInfo.ruleForm.value }"
|
|||
|
|
></slot>
|
|||
|
|
</div>
|
|||
|
|
</a-form-item>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- <a-form-item
|
|||
|
|
v-for="item in items.list"
|
|||
|
|
:key="item.key"
|
|||
|
|
:label="item.label"
|
|||
|
|
:name="item.key"
|
|||
|
|
:class="[item.colStatus ? 'item-width' : 'form-item']"
|
|||
|
|
> -->
|
|||
|
|
</a-form>
|
|||
|
|
</div>
|
|||
|
|
</a-card>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script setup>
|
|||
|
|
import { UserOutlined, InfoCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
|||
|
|
import {
|
|||
|
|
ref,
|
|||
|
|
reactive,
|
|||
|
|
defineProps,
|
|||
|
|
defineEmits,
|
|||
|
|
watch,
|
|||
|
|
toRefs,
|
|||
|
|
onMounted,
|
|||
|
|
defineExpose
|
|||
|
|
} from 'vue'
|
|||
|
|
import { TreeSelect } from 'ant-design-vue'
|
|||
|
|
import iconfonts from '../assets/iconfont/iconfont.json'
|
|||
|
|
import validateRulesObj from '../utils/decorator'
|
|||
|
|
|
|||
|
|
const iconList = iconfonts.glyphs
|
|||
|
|
const formRef = ref()
|
|||
|
|
const props = defineProps({
|
|||
|
|
items: {
|
|||
|
|
type: Object,
|
|||
|
|
required: () => []
|
|||
|
|
},
|
|||
|
|
formRules: {
|
|||
|
|
type: Object
|
|||
|
|
},
|
|||
|
|
ruleForm: {
|
|||
|
|
type: Object
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
disabled: {
|
|||
|
|
type: Boolean
|
|||
|
|
},
|
|||
|
|
type: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
const propsInfo = toRefs(props)
|
|||
|
|
const exposeRuleForm = propsInfo.ruleForm.value
|
|||
|
|
onMounted(() => {})
|
|||
|
|
const emit = defineEmits(['handlerClick'])
|
|||
|
|
const data = reactive({
|
|||
|
|
validateRulesObj,
|
|||
|
|
newRuleForm: {},
|
|||
|
|
// : {},
|
|||
|
|
key: 0,
|
|||
|
|
tableIndex: null,
|
|||
|
|
tableInfo: [],
|
|||
|
|
// tableIndex: 0,
|
|||
|
|
mockData: [{}],
|
|||
|
|
targetKeys: [],
|
|||
|
|
// 单选-树节点
|
|||
|
|
treeRadioValue: null,
|
|||
|
|
treeData: [
|
|||
|
|
{ id: 1, pId: 0, value: '1', title: 'Expand to load' },
|
|||
|
|
{ id: 2, pId: 0, value: '2', title: 'Expand to load' },
|
|||
|
|
{ id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true }
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
treeCheckValue: null,
|
|||
|
|
SHOW_PARENT: TreeSelect.SHOW_PARENT,
|
|||
|
|
|
|||
|
|
loading: false,
|
|||
|
|
imageUrl: ''
|
|||
|
|
})
|
|||
|
|
const extraInformation = ref(
|
|||
|
|
'Cron表达式由6个(或7个)字段组成，分别表示秒、分、小时、月中的日期、月份、星期中的日期(以及可选的年份)。每个字段可以包含以下字符:·星号(*):表示该字段可以接受任何值、·问号(?):通常用于"日”和"星期”字段，表示不指定值，即表示“无特定值”。·连字符(-):用于指定范围，如"10-12”表示10、11、12·逗号():用于指定多个值，如“MON,WED,FRI”表示星期一、星期三和星期五。·斜杠(/):用于指定增量，如“0/15”在秒字段中表示从0秒开始，每15秒一次。·L:在"日”字段中表示一个月的最后一天，在"星期”字段中表示一个星期的最后一天(通常是星期六)。W:用于指定最近的工作日(周一至周五)，如“15W”表示离15号最近的工作日。”#:用于指定一个月中的第几个星期几，如“6#3”表示一个月中的第三个星期五。个典型的Cron表达式示例是:"0012**?”，它表示每天中午12点触发'
|
|||
|
|
)
|
|||
|
|
watch(
|
|||
|
|
() => props.formRules,
|
|||
|
|
(nVal, o) => {
|
|||
|
|
for (const key in nVal) {
|
|||
|
|
nVal[key].forEach((item) => {
|
|||
|
|
if (item.validatorType) {
|
|||
|
|
item.validator = data.validateRulesObj[item.validatorType]?.rules[0].validator
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{ deep: true, immediate: true }
|
|||
|
|
)
|
|||
|
|
function checkTree(checkedKeys, e) {}
|
|||
|
|
// 按钮的点击事件
|
|||
|
|
function btnClick(item) {
|
|||
|
|
emit('handlerClick', item)
|
|||
|
|
}
|
|||
|
|
function confirm() {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
if (formRef.value) {
|
|||
|
|
formRef.value
|
|||
|
|
.validate()
|
|||
|
|
.then(() => {
|
|||
|
|
resolve(true)
|
|||
|
|
})
|
|||
|
|
.catch((error) => {
|
|||
|
|
console.log('error', error)
|
|||
|
|
resolve(false)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
function handleReset() {
|
|||
|
|
if (formRef.value) {
|
|||
|
|
formRef.value.resetFields()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function switchChange(checked, switchItem) {
|
|||
|
|
propsInfo.ruleForm.value[switchItem.key] = checked
|
|||
|
|
}
|
|||
|
|
function RadioChange(e, radioItem) {
|
|||
|
|
const { value } = e.target
|
|||
|
|
propsInfo.ruleForm.value[radioItem.key] = value
|
|||
|
|
}
|
|||
|
|
function transferChange(targetKeys, transferItem) {
|
|||
|
|
data.targetKeys = targetKeys
|
|||
|
|
propsInfo.ruleForm.value[transferItem.key] = data.targetKeys
|
|||
|
|
}
|
|||
|
|
function transferSearch(dir, value) {}
|
|||
|
|
|
|||
|
|
// 单选-树节点
|
|||
|
|
function genTreeNode(parentId, isLeaf = false) {
|
|||
|
|
const random = Math.random().toString(36).substring(2, 6)
|
|||
|
|
return {
|
|||
|
|
id: random,
|
|||
|
|
pId: parentId,
|
|||
|
|
value: random,
|
|||
|
|
title: isLeaf ? 'Tree Node' : 'Expand to load',
|
|||
|
|
isLeaf
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onLoadTree(treeNode) {
|
|||
|
|
return new Promise((resolve) => {
|
|||
|
|
const { id } = treeNode.dataRef
|
|||
|
|
setTimeout(() => {
|
|||
|
|
data.treeData = data.treeData.concat([
|
|||
|
|
data.genTreeNode(id, false),
|
|||
|
|
data.genTreeNode(id, true)
|
|||
|
|
])
|
|||
|
|
resolve()
|
|||
|
|
}, 300)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function treeChange(key, value, node, extra) {
|
|||
|
|
propsInfo.ruleForm.value[key] = value
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 级联选择器
|
|||
|
|
function cascaderChange(value, cascaderItem) {
|
|||
|
|
propsInfo.ruleForm.value[cascaderItem.key] = value
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function filter(inputValue, path) {
|
|||
|
|
return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function avatarUploadChange(info) {
|
|||
|
|
if (info.file.status === 'uploading') {
|
|||
|
|
data.loading = true
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (info.file.status === 'done') {
|
|||
|
|
getBase64(info.file.originFileObj, (imageUrl) => {
|
|||
|
|
data.imageUrl = imageUrl
|
|||
|
|
data.loading = false
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onFieldsChange() {}
|
|||
|
|
function handleSubmit() {}
|
|||
|
|
|
|||
|
|
function getBase64(img, callback) {
|
|||
|
|
const reader = new FileReader()
|
|||
|
|
reader.addEventListener('load', () => callback(reader.result))
|
|||
|
|
reader.readAsDataURL(img)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 主动暴露方法
|
|||
|
|
defineExpose({
|
|||
|
|
confirm,
|
|||
|
|
handleReset,
|
|||
|
|
ruleForm: exposeRuleForm
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.allHeight {
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.card-content:first-child {
|
|||
|
|
margin-top: 0px;
|
|||
|
|
}
|
|||
|
|
.card-content {
|
|||
|
|
margin-top: 15px;
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
:deep(.ant-timeline) {
|
|||
|
|
color: var(--theme-text-default) !important;
|
|||
|
|
|
|||
|
|
.ant-timeline-item-tail {
|
|||
|
|
border-inline-start: 2px solid var(--theme-text-default) !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
:deep(.ant-form-item .ant-form-item-label > label) {
|
|||
|
|
color: var(--theme-text-default) !important;
|
|||
|
|
}
|
|||
|
|
.info-title {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 530;
|
|||
|
|
color: var(--theme-text-default);
|
|||
|
|
text-align: left;
|
|||
|
|
border-bottom: 1.5px solid var(--theme-bg);
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
|
|||
|
|
.box {
|
|||
|
|
color:#fff;
|
|||
|
|
width:230px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
border-bottom: 5px solid transparent;
|
|||
|
|
border-image: url('../assets/boxBottom.png') 0 0 100% 0 stretch;
|
|||
|
|
|
|||
|
|
|
|||
|
|
div:last-child {
|
|||
|
|
height: 25px;
|
|||
|
|
line-height: 25px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
:deep(.a-tooltip) {
|
|||
|
|
color: var(--theme-text3);
|
|||
|
|
}
|
|||
|
|
:deep(.ant-divider) {
|
|||
|
|
color: var(--theme-bg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// :deep(.ant-table-wrapper) {
|
|||
|
|
// :deep(.ant-input) {
|
|||
|
|
// background: red !important;
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
.title-none {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
:deep(.ant-card){
|
|||
|
|
background-color: transparent;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
:deep(.ant-card-body) {
|
|||
|
|
padding: 15px;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
.ant-form {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
height: 100%;
|
|||
|
|
.item-l,
|
|||
|
|
.item-div {
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.ant-card-bordered {
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
.info-content {
|
|||
|
|
height: calc(100% - 30px);
|
|||
|
|
.info-form {
|
|||
|
|
.item-div {
|
|||
|
|
|
|||
|
|
width:45%;
|
|||
|
|
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
.item-l{
|
|||
|
|
width:100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-item {
|
|||
|
|
width:320px!important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.ant-form-item-label) {
|
|||
|
|
color:#fff;
|
|||
|
|
font-size: 16px !important;
|
|||
|
|
width:100px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.ant-form-item-control-wrapper) {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.editable-row-operations a {
|
|||
|
|
margin-right: 8px;
|
|||
|
|
}
|
|||
|
|
// 表格中的按钮
|
|||
|
|
:deep(.ant-table-cell) {
|
|||
|
|
.ant-btn {
|
|||
|
|
height: 24px !important;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
.ant-btn-dangerous {
|
|||
|
|
background: var(--theme-btn2) !important;
|
|||
|
|
}
|
|||
|
|
.btn-del {
|
|||
|
|
background: var(--theme-btn2);
|
|||
|
|
}
|
|||
|
|
.btn-add {
|
|||
|
|
background: var(--theme-btn3);
|
|||
|
|
}
|
|||
|
|
.btn-upload,
|
|||
|
|
.btn-downTemplate {
|
|||
|
|
background: var(--theme-btn1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
:deep(.ant-calendar-picker) {
|
|||
|
|
width: 100% !important;
|
|||
|
|
}
|
|||
|
|
:deep(.ant-picker) {
|
|||
|
|
width: 100% !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
:deep(.ant-form-item.form-item) {
|
|||
|
|
padding: 0px !important;
|
|||
|
|
padding-right: 20px !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.ant-checkbox-disabled + span) {
|
|||
|
|
color: var(--theme-text-default) !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(textarea.ant-input) {
|
|||
|
|
background-color: var(--theme-bg) !important;
|
|||
|
|
border: none !important;
|
|||
|
|
color: var(--theme-text-default) !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
:deep(.ant-checkbox-wrapper) {
|
|||
|
|
color: var(--theme-text-default);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</style>
|