mt-yd-ui/src/components/base-dialog/AttrForm/index.vue

<template>
	<div class="attr-form">
		<h3>{{ title }} <el-button style="margin-left: 8px;" type="text" @click="showAddAttr = true">添加</el-button></h3>
		<div v-if="!showAddAttr">
			<component
				key="sub-table"
				:is="require('../../base-table/index.vue').default"
				:table-head-configs="tableConfigs"
				:data="dataList"
				:max-height="500"
				@operate-event="handleOperations"
			/>
			<el-pagination
				@size-change="sizeChangeHandle"
				@current-change="currentChangeHandle"
				:current-page="pageIndex"
				:page-sizes="[5, 10, 20, 50]"
				:page-size="pageSize"
				:total="totalPage"
				layout="total, sizes, prev, pager, next, jumper"
			>
			</el-pagination>
		</div>
		<div v-else style="background: #eee; border-radius: 8px; padding: 12px;">
			<el-row>
				<el-col :span="10" :offset="7">
					<el-form ref="AttrForm" :model="AttrForm" :rules="AttrFormRules" :inline="true">
						<el-form-item v-for="field in attrFormFields" :key="field.prop" :prop="field.prop" :label="field.name">
							<el-input v-model="AttrForm[field.prop]" clearable />
							<!-- add more...  -->
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<el-row style="text-align: center;">
				<el-button size="small" @click="handleCloseAttrForm">取消</el-button>
				<el-button type="success" size="small" @click="handleSaveAttrForm">保存</el-button>
			</el-row>
		</div>
	</div>
</template>

<script>
import BaseTable from '@/components/base-table'
import { pick } from 'lodash/object'

export default {
	name: 'AttrForm',
	components: { BaseTable },
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		/** subtable 需要设置的属性 */
		title: {
			type: String,
			default: ''
		},
		url: {
			type: String,
			default: ''
		},
		tableConfigs: {
			type: Array,
			default: () => []
		},
		/** 表单提交需要的属性 */
		pId: {
			type: String,
			default: null
		}
	},
	data() {
		return {
			showAddAttr: false,
			dataList: [],
			pageIndex: 1,
			pageSize: 10,
			totalPage: 0,
			AttrForm: {}, // 需动态设置
			AttrFormRules: {} // 需动态设置
		}
	},
	computed: {
		attrFormFields() {
			const _ = this.tableConfigs.filter(item => item.formField)
			/** 顺带配置 AttrForm */
			_.forEach(item => {
				this.$set(this.AttrForm, [item.prop], '')
			})

			this.$set(this.AttrForm, 'id', null)
			return _
		}
	},
	mounted() {
		this.getDataList()
    /** 设置 AttrForm 的 rules */
    for(const config of this.tableConfigs) {
      if (config.rules) {
        this.$set(this.AttrFormRules, [config.prop], config.rules)
      }
    }
	},
	methods: {
		/** init dataform */
		initAttrForm() {
			Object.entries(this.AttrForm).forEach(([key, value]) => {
				if (typeof value === 'object' || typeof value === 'number') {
					this.AttrForm[key] = null
				} else if (Array.isArray(value)) {
					this.AttrForm[key] = []
				} else {
					this.AttrForm[key] = ''
				}
			})
		},

		/** requests */
		getDataList() {
			this.dataListLoading = true
			// 获取动态属性列表
			this.$http({
				url: this.$http.adornUrl(`${this.url}/page`),
				method: 'get',
				params: this.$http.adornParams({
					page: this.pageIndex,
					limit: this.pageSize,
					productId: this.pId
					// order: 'asc/desc',
					// orderField: 'name'
				})
			}).then(({ data: res }) => {
				if (res && res.code === 0) {
					this.dataList = res.data.list
					this.totalPage = res.data.total
				} else {
					this.dataList = []
					this.totalPage = 0
				}
				this.dataListLoading = false
			})
		},

		/** handlers */
		handleOperations({ type, data: id }) {
			switch (type) {
				case 'edit':
					{
						this.showAddAttr = true
						this.$nextTick(() => {
							this.$http.get(this.$http.adornUrl(`${this.url}/${id}`)).then(({ data: res }) => {
								if (res && res.code === 0 && res.data) {
									const neededFields = [...this.attrFormFields.map(item => item.prop), 'id']
									const filtered = pick(res.data, neededFields)
									for (let field of neededFields) {
										this.AttrForm[field] = filtered[field]
									}
								}
							})
						})
					}
					break
				case 'delete':
					return this.deleteHandle(id)
			}
		},
		deleteHandle(id) {
			var ids = id ? [id] : []

			this.$confirm(`确定对id=${ids.join(',')}进行${id ? '删除' : '批量删除'}操作?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$http({
					url: this.$http.adornUrl(this.url),
					method: 'delete',
					data: this.$http.adornData(ids, false, 'raw')
				}).then(({ data }) => {
					if (data && data.code === 0) {
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.getDataList()
							}
						})
					} else {
						this.$message.error(data.msg)
					}
				})
			})
		},

		handleCloseAttrForm() {
			this.showAddAttr = false
			this.initAttrForm()
		},

		handleSaveAttrForm() {
			this.$refs['AttrForm'].validate(valid => {
				if (valid) {
					this.$http({
						// url: this.$http.adornUrl(`${this.url}/${!this.AttrForm.id ? '' : this.AttrForm.id}`),
						url: this.$http.adornUrl(this.url),
						method: this.AttrForm.id ? 'put' : 'post',
						headers: {
							'Content-Type': 'application/json'
						},
						data: JSON.stringify({ ...this.AttrForm, productId: this.pId })
					}).then(({ data }) => {
						if (data && data.code === 0) {
							this.$message({
								message: '操作成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.showAddAttr = false
									this.getDataList()
									this.initAttrForm()
								}
							})
						} else {
							this.$message.error(data.msg)
						}
					})
				}
			})
		},

		// 每页数
		sizeChangeHandle(val) {
			this.pageSize = val
			this.pageIndex = 1
			this.getDataList()
		},
		// 当前页
		currentChangeHandle(val) {
			this.pageIndex = val
			this.getDataList()
		}
	}
}
</script>