表格新增和編輯界面為彈窗格式:
<template>
<div class="app-container">
<el-row :gutter="20">
<el-col :span="4">
<el-button type="primary" @click="dialogVisible = true">{{ $t('table.add') }}</el-button>
</el-col>
</el-row>
<el-table
:data="configList"
border
stripe
>
<el-table-column :label="$t('table.id')" width="95" align="center">
<template slot-scope="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column :label="$t('table.key')" width="300" align="center">
<template slot-scope="scope">
<span>{{ scope.row.key }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('table.type')" align="center">
<template slot-scope="scope">
<span>{{ scope.row.type }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('table.value')" align="center">
<template slot-scope="scope">
<span>{{ scope.row.value }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('table.desc')" align="center">
<template slot-scope="scope">
<span>{{ scope.row.desc }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('table.operate')" align="center" width="250">
<template slot-scope="scope">
<el-button v-if="!scope.row.edit" type="text" size="small" @click="showEditDialog(scope.row.id)">{{ $t('table.edit') }}</el-button>
<el-button v-if="!scope.row.edit" type="text" size="small" @click="removeConfigById(scope.row.id)">{{ $t('table.delete') }}</el-button>
</template>
</el-table-column>
</el-table>
<!-- 添加配置的對話框 -->
<el-dialog :title="$t('table.addFormTitle')" :visible.sync="dialogVisible" width="50%" @close="addDialogClosed">
<!-- 内容主體區域 -->
<el-form
ref="addFormRef"
label-width="70px"
:model="addForm"
:rules="addFormRules"
>
<el-form-item :label="$t('table.key')" prop="key">
<el-input v-model="addForm.key" />
</el-form-item>
<el-form-item :label="$t('table.type')">
<el-select v-model="addForm.type" :placeholder="$t('table.pleaseSelect')">
<el-option value="num">num</el-option>
<el-option value="color">color</el-option>
<el-option value="boolean">boolean</el-option>
<el-option value="other">other</el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('table.value')" prop="value">
<el-input v-model="addForm.value" />
</el-form-item>
<el-form-item :label="$t('table.desc')">
<el-input v-model="addForm.desc" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">{{ $t('table.cancel') }}</el-button>
<el-button type="primary" @click="addConfig">{{ $t('table.submit') }}</el-button>
</span>
</el-dialog>
<!-- 修改配置的對話框 -->
<el-dialog :title="$t('table.editFormTitle')" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
<!-- 内容主體區域 -->
<el-form
ref="editFormRef"
label-width="70px"
:model="editForm"
:rules="editFormRules"
>
<el-form-item :label="$t('table.key')" prop="key">
<el-input v-model="editForm.key" />
</el-form-item>
<el-form-item :label="$t('table.type')">
<el-select v-model="editForm.type" :placeholder="$t('table.pleaseSelect')">
<el-option value="num">num</el-option>
<el-option value="color">color</el-option>
<el-option value="boolean">boolean</el-option>
<el-option value="other">other</el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('table.value')" prop="value">
<el-input v-model="editForm.value" />
</el-form-item>
<el-form-item :label="$t('table.desc')">
<el-input v-model="editForm.desc" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">{{ $t('table.cancel') }}</el-button>
<el-button type="primary" @click="editConfigInfo">{{ $t('table.submit') }}</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { getAllConfig, updateConfig, deleteConfig, addConfig, getConfigById } from '@/api/system-config'
import { validColor, validNum, configKeyValid, configValueValid } from '@/utils/validate'
export default {
data() {
var validateValue = (rule, value, callback, type) => {
let valid = true
if (type === 'color') {
valid = validColor(value)
} else if (type === 'num') {
valid = validNum(value)
} else if (type === 'boolean') {
if (value === 'true' || value === 'false') {
valid = true
} else {
valid = false
}
}
if (!valid) {
callback(new Error('格式錯誤'))
} else {
return callback()
}
}
return {
listLoading: false,
configList: [],
// 添加對話框(顯示/隐藏)
dialogVisible: false,
// 添加配置的表單資料
addForm: {
key: '',
type: 'other',
value: '',
desc: ''
},
// 添加表單的驗證規則對象
addFormRules: {
key: configKeyValid,
value: [
...configValueValid,
{ validator: (rule, value, callback) => { validateValue(rule, value, callback, this.addForm.type) } }
]
},
// 修改配置對話框(顯示/隐藏)
editDialogVisible: false,
// 查詢到的配置資訊
editForm: {},
// 修改表單的驗證規則對象
editFormRules: {
key: configKeyValid,
value: [
...configValueValid,
{ validator: (rule, value, callback) => { validateValue(rule, value, callback, this.editForm.type) } }
]
}
}
},
created() {},
mounted() {
this.getSystemConfigList()
},
methods: {
async getSystemConfigList() {
this.configList = await getAllConfig()
},
// 監聽添加配置對話框的關閉事件
addDialogClosed() {
this.$refs.addFormRef.resetFields()
},
// 添加使用者
addConfig() {
this.$refs.addFormRef.validate(async valid => {
if (!valid) return
addConfig(this.addForm).then(() => {
// 隐藏添加配置的對話框
this.dialogVisible = false
// 重新擷取配置
this.getSystemConfigList()
})
})
},
// 展示編輯配置的對話框
async showEditDialog(id) {
this.editForm = await getConfigById(id)
this.editDialogVisible = true
},
// 監聽修改配置對話框的關閉事件
editDialogClosed() {
this.$refs.editFormRef.resetFields()
},
// 修改配置資訊并送出
editConfigInfo() {
this.$refs.editFormRef.validate(async valid => {
if (!valid) return
updateConfig(this.editForm).then(() => {
// // 關閉對話框
this.editDialogVisible = false
// 重新整理資料清單
this.getSystemConfigList()
// 提醒更新配置資訊成功
this.$message.success('Update Success')
})
})
},
// 删除配置
async removeConfigById(id) {
this.$confirm('Are you sure you want to delete it?', 'Warning', {
confirmButtonText: 'submit',
cancelButtonText: 'cancel',
type: 'warning',
center: true
}).then(() => {
deleteConfig(id).then(() => {
this.$message({
type: 'success',
message: 'Success!'
})
})
this.getSystemConfigList()
})
}
}
}
</script>
<style>
.el-table {
margin: 15px 0;
font-size: 12px;
}
</style>
驗證表單代碼：
// 系統配置清單頁驗證
export const configKeyValid = [
{ required: true, message: '此項不能為空', trigger: 'blur' },
{ min: 1, max: 15, message: '長度在 1 到 15 個字元', trigger: 'blur' }
]
export const configValueValid = [
{ required: true, message: '此項不能為空', trigger: 'blur' },
{ min: 1, max: 15, message: '長度在 1 到 15 個字元', trigger: 'blur' },
]
/**
* @param {string} str
* @returns {Boolean}
*/
export function validColor(str) {
return /^#[0-9a-fA-F]{6}$/.test(str)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validNum(str) {
return /^[0-9]+$/.test(str)
}
![vue項目：npm打包-S和-D差別：[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)