You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
3.5 KiB
122 lines
3.5 KiB
<template>
|
|
<el-row :gutter="80">
|
|
<el-col :span="10" :offset="0">
|
|
<el-button class="mb-10px" type="primary" @click="handleInsert">新增属性</el-button>
|
|
<el-table :data="tableList">
|
|
<el-table-column prop="name" label="名称" />
|
|
<el-table-column label="启用状态">
|
|
<template #default="{ row }">
|
|
<el-switch
|
|
v-model="row.status"
|
|
:active-value="1"
|
|
:inactive-value="0"
|
|
:disabled="!row.canUpdate"
|
|
@change="changeStatus(row)"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="80px">
|
|
<template #default="{ row }">
|
|
<el-button
|
|
type="primary"
|
|
text
|
|
:disabled="!row.canUpdate"
|
|
style="padding: 0"
|
|
@click="remove(row)"
|
|
>删除</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-col>
|
|
<el-col :span="14" :offset="0">
|
|
<el-form :model="form" ref="fieldForm" :rules="rules" label-width="80px" :inline="false">
|
|
<el-form-item label="属性名称" prop="name">
|
|
<el-input v-model="form.name" placeholder="请输入属性名称" />
|
|
</el-form-item>
|
|
<el-form-item label="属性类型" prop="type">
|
|
<el-select
|
|
v-model="form.type"
|
|
placeholder="请选择属性类型"
|
|
clearable
|
|
filterable
|
|
style="width: 100%"
|
|
>
|
|
<el-option
|
|
v-for="item in typeOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="['Checkbox', 'Radio', 'Select'].includes(form.type)"
|
|
label="选项"
|
|
prop="option"
|
|
key="option"
|
|
>
|
|
<div>
|
|
<el-button type="primary" @click="optionList.push([])"> 新增选项 </el-button>
|
|
<div
|
|
class="flex justify-between mt-10px"
|
|
v-for="(item, index) in optionList"
|
|
:key="index"
|
|
>
|
|
<el-input v-model="item.label" placeholder="请输入选项内容" clearable />
|
|
<el-button type="primary" text @click="optionList.splice(index, 1)">删除</el-button>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="onSubmit">保存</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
|
|
<script setup>
|
|
const tableList = ref([{ name: '额外支出费用', status: 1, canUpdate: true }])
|
|
|
|
const form = ref({
|
|
name: undefined,
|
|
type: undefined,
|
|
option: undefined
|
|
})
|
|
|
|
const typeOptions = ref([
|
|
{ label: '输入框', value: 'Input' },
|
|
{ label: '多选', value: 'Checkbox' },
|
|
{ label: '单选', value: 'Radio' },
|
|
{ label: '下拉选', value: 'Select' },
|
|
{ label: '开关', value: 'Switch' },
|
|
{ label: '日期选择', value: 'DatePicker' },
|
|
{ label: '时间选择', value: 'TimePicker' },
|
|
{ label: '富文本', value: 'Editor' },
|
|
{ label: '图片', value: 'UploadImg' },
|
|
{ label: '文件', value: 'UploadFile' }
|
|
])
|
|
|
|
const rules = {}
|
|
|
|
const optionList = ref([])
|
|
|
|
function handleInsert() {
|
|
console.log('新增')
|
|
}
|
|
|
|
function changeStatus(row) {
|
|
console.log(row.status)
|
|
}
|
|
|
|
function remove(row) {
|
|
console.log(row.status)
|
|
}
|
|
|
|
function onSubmit() {
|
|
console.log('保存')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|
|
|