zq
6 months ago
9 changed files with 928 additions and 195 deletions
@ -0,0 +1,114 @@ |
|||
<template> |
|||
<el-dialog |
|||
:visible.sync="dialogShow" |
|||
:title="title" |
|||
:width="width" |
|||
:show-close="showCloseButton" |
|||
:before-close="handleClose" |
|||
> |
|||
<!-- 自定义内容 --> |
|||
<slot></slot> |
|||
|
|||
<!-- 底部按钮 --> |
|||
<span slot="footer" class="dialog-footer flex"> |
|||
<el-button v-if="showCancelButton" @click="handleCancel">{{ cancelText }}</el-button> |
|||
<el-button type="primary" @click="handleConfirm">{{ confirmText }}</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'CustomDialog', |
|||
props: { |
|||
// 控制弹框显示 |
|||
dialogVisible: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
// 弹框标题 |
|||
title: { |
|||
type: String, |
|||
default: '提示', |
|||
}, |
|||
// 弹框宽度 |
|||
width: { |
|||
type: String, |
|||
default: '30%', |
|||
}, |
|||
// 是否显示右上角关闭按钮 |
|||
showCloseButton: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
// 是否显示取消按钮 |
|||
showCancelButton: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
// 取消按钮文本 |
|||
cancelText: { |
|||
type: String, |
|||
default: '取消', |
|||
}, |
|||
// 确认按钮文本 |
|||
confirmText: { |
|||
type: String, |
|||
default: '确定', |
|||
}, |
|||
}, |
|||
computed: { |
|||
dialogShow: { |
|||
get() { |
|||
return this.dialogVisible; |
|||
}, |
|||
set(newVal) { |
|||
this.$emit('dialogVisibleChange', newVal); |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
// 内部维护一个 visible 状态 |
|||
internalVisible: this.visible, |
|||
// dialogVisible:false, |
|||
}; |
|||
}, |
|||
watch: { |
|||
// // 监听 prop 的变化，同步到 internalVisible |
|||
// visible(newVal) { |
|||
// this.internalVisible = newVal; |
|||
// }, |
|||
// // 监听 internalVisible 的变化，通知父组件 |
|||
// internalVisible(newVal) { |
|||
// this.$emit('update:visible', newVal); |
|||
// }, |
|||
}, |
|||
methods: { |
|||
// 关闭弹框 |
|||
handleClose(done) { |
|||
this.$emit('close'); |
|||
this.internalVisible = false; // 关闭弹框 |
|||
if(done){ |
|||
done(); |
|||
} |
|||
}, |
|||
// 点击取消按钮 |
|||
handleCancel() { |
|||
this.$emit('cancel'); |
|||
this.internalVisible = false; // 关闭弹框 |
|||
}, |
|||
// 点击确认按钮 |
|||
handleConfirm() { |
|||
this.$emit('confirm'); |
|||
this.internalVisible = false; // 关闭弹框 |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.dialog-footer { |
|||
text-align: right; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,247 @@ |
|||
<!-- Dom模板 --> |
|||
<template> |
|||
<div> |
|||
<!-- Dom内容 --> |
|||
<el-form |
|||
:model="ruleForm" |
|||
ref="ruleForm" |
|||
:label-width="labelWidth" |
|||
class="el-row demo-ruleForm" |
|||
:label-position="labelPosition" |
|||
> |
|||
<el-form-item |
|||
v-for="(item, index) in formList" |
|||
:key="index" |
|||
:label="item.label" |
|||
:prop="item.field" |
|||
:rules="detail ? false : item.rules" |
|||
:class="item.colWidth" |
|||
> |
|||
<!-- 输入框 --> |
|||
<template v-if="item.type === 'input'"> |
|||
<el-input |
|||
:placeholder="item.placeholder" |
|||
clearable |
|||
:disabled="disabled" |
|||
v-model="ruleForm[`${item.field}`]" |
|||
/> |
|||
</template> |
|||
<!-- 下拉框 --> |
|||
<template v-if="item.type === 'select'"> |
|||
<el-select |
|||
v-model="ruleForm[`${item.field}`]" |
|||
:placeholder="item.placeholder" |
|||
:disabled="disabled" |
|||
:multiple="item.multiple" |
|||
style="width: 100%" |
|||
@change="changeSelect" |
|||
> |
|||
<el-option |
|||
v-for="(element, i) in item.options" |
|||
:label="element.label" |
|||
:value="`${element.value}`" |
|||
:key="i" |
|||
/> |
|||
</el-select> |
|||
</template> |
|||
<!-- 单选框 --> |
|||
<template v-if="item.type === 'radio'"> |
|||
<el-radio-group |
|||
v-model="ruleForm[`${item.field}`]" |
|||
:disabled="disabled" |
|||
> |
|||
<el-radio |
|||
v-for="(element, i) in item.options" |
|||
:key="i" |
|||
:label="`${element.value}`" |
|||
> |
|||
{{ element.label }} |
|||
</el-radio> |
|||
</el-radio-group> |
|||
</template> |
|||
<!-- 复选框 --> |
|||
<template v-if="item.type === 'checkbox'"> |
|||
<el-checkbox-group |
|||
v-model="ruleForm[`${item.field}`]" |
|||
:disabled="disabled" |
|||
> |
|||
<el-checkbox |
|||
v-for="(city, i) in item.cities" |
|||
:label="city" |
|||
:name="city" |
|||
:key="i" |
|||
> |
|||
{{ city }} |
|||
</el-checkbox> |
|||
</el-checkbox-group> |
|||
</template> |
|||
<!--文本框 --> |
|||
<template v-if="item.type === 'textarea'"> |
|||
<el-input |
|||
:maxlength="item.maxLenght" |
|||
type="textarea" |
|||
:rows="item.rowsHeight" |
|||
:disabled="disabled" |
|||
:placeholder="item.placeholder" |
|||
v-model="ruleForm[`${item.field}`]" |
|||
/> |
|||
</template> |
|||
<!-- 时间选择 --> |
|||
<template v-if="item.type === 'date'"> |
|||
<el-date-picker |
|||
v-model="ruleForm[`${item.field}`]" |
|||
align="right" |
|||
style="width: 100%" |
|||
value-format="yyyy-MM-dd HH:mm:ss" |
|||
:disabled="disabled" |
|||
type="date" |
|||
placeholder="选择日期" |
|||
:picker-options="item.pickerOptions" |
|||
> |
|||
</el-date-picker> |
|||
</template> |
|||
<!-- 附件 --> |
|||
<template v-if="item.type === 'upload'"> |
|||
<el-upload |
|||
:action="item.action" |
|||
list-type="picture-card" |
|||
:headers="item.headers" |
|||
:disabled="disabled" |
|||
class="upload-demo" |
|||
:multiple="item.multiple" |
|||
:data="ruleForm[`${item.field}`]" |
|||
:file-list="ruleForm[`${item.field}`]" |
|||
:on-change="uploadFile" |
|||
:auto-upload="false" |
|||
:on-preview="handlePictureCardPreview" |
|||
:on-remove="handleRemove" |
|||
> |
|||
<i slot="default" class="el-icon-plus"></i> |
|||
</el-upload> |
|||
</template> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-dialog :visible.sync="dialogVisible"> |
|||
<img width="100%" :src="dialogImageUrl" alt="" /> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
props: { |
|||
detail: { |
|||
type: Boolean, |
|||
default: () => false, |
|||
}, |
|||
disabled: { |
|||
type: Boolean, |
|||
default: () => false, |
|||
}, |
|||
//回显数据 |
|||
fromItem: { |
|||
type: Object, |
|||
default: () => null, |
|||
}, |
|||
labelWidth: { |
|||
type: String, |
|||
default: () => "100px", |
|||
}, |
|||
// 表单数据 |
|||
formNewList: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
labelPosition: { |
|||
type: String, |
|||
default: () => "right", |
|||
}, |
|||
}, |
|||
watch: { |
|||
formNewList: { |
|||
immediate: true, // 立即触发监听函数 |
|||
handler() { |
|||
this.formList = this.formNewList; |
|||
this.defaultFun(); |
|||
}, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
ruleForm: {}, |
|||
formList: [], |
|||
dialogImageUrl: "", |
|||
dialogVisible: false, |
|||
}; |
|||
}, |
|||
methods: { |
|||
//下拉框下拉事件 |
|||
changeSelect(row) { |
|||
// console.log(row); |
|||
this.$emit("changeSelect", row); |
|||
}, |
|||
//上传附件 |
|||
uploadFile(file, fileList) { |
|||
this.formList.forEach((item) => { |
|||
if (item.type === "upload") { |
|||
this.$set(this.ruleForm, item.field, fileList); |
|||
} |
|||
}); |
|||
}, |
|||
//删除附件 |
|||
handleRemove(file) { |
|||
this.formList.forEach((item) => { |
|||
let fileList = this.ruleForm[`${item.field}`]; |
|||
if (item.type === "upload") { |
|||
fileList.forEach((element, i) => { |
|||
if (file.uid === element.uid) { |
|||
fileList.splice(i, 1); |
|||
} |
|||
}); |
|||
} |
|||
this.$set(this.ruleForm, item.field, fileList); |
|||
}); |
|||
}, |
|||
//附件预览 |
|||
handlePictureCardPreview(file) { |
|||
console.log(file); |
|||
this.dialogImageUrl = file.url; |
|||
this.dialogVisible = true; |
|||
}, |
|||
//表单默认状态 |
|||
defaultFun() { |
|||
if (this.fromItem !== null) { |
|||
// 数据回显 |
|||
this.ruleForm = { ...this.ruleForm, ...this.fromItem }; |
|||
} else { |
|||
//设置默认值 |
|||
this.formList.forEach((item) => { |
|||
if (item.cities) { |
|||
this.$set(this.ruleForm, item.field, []); |
|||
} else { |
|||
this.$set(this.ruleForm, item.field, ""); |
|||
} |
|||
if (item.type === "radio") { |
|||
this.$set(this.ruleForm, item.field, "1"); |
|||
} |
|||
if (item.type === "upload") { |
|||
this.$set(this.ruleForm, item.field, []); |
|||
} |
|||
}); |
|||
} |
|||
console.log(this.ruleForm); |
|||
}, |
|||
//from表单点击事件 |
|||
submitForm(formName) { |
|||
this.$refs[formName].validate((valid) => { |
|||
if (valid) { |
|||
this.$emit("headdenForm", this.ruleForm); |
|||
} |
|||
}); |
|||
}, |
|||
//清空表单 |
|||
resetForm(formName) { |
|||
this.$refs[formName].resetFields(); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -1,26 +1,85 @@ |
|||
<template> |
|||
<el-radio |
|||
:label="label" |
|||
:disabled="disabled" |
|||
:v-model="defaultValue" |
|||
> |
|||
<template #label> |
|||
<span><img src="../assets/radio_checked.svg" alt="custom icon" style="width: 16px; height: 16px;"> {{ text }}</span> |
|||
</template> |
|||
</el-radio> |
|||
</template> |
|||
<template> |
|||
<el-form-item |
|||
:class="[{'column':column},'form-item']" |
|||
:label="label" :prop="prop" :rules="rules"> |
|||
<el-radio-group |
|||
v-model="selectedValue" |
|||
@change="handleChange" |
|||
> |
|||
<el-radio |
|||
v-for="option in options" |
|||
:key="option.value" |
|||
:label="option.value" |
|||
:disabled="option.disabled" |
|||
> |
|||
{{ option.label }} |
|||
<!-- <template #label> |
|||
<span><img src="../assets/radio_checked.svg" alt="custom icon" style="width: 16px; height: 16px;"> {{ text }}</span> |
|||
</template> --> |
|||
</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'GuipRadio', |
|||
props:['radio','label','defaultValue','disabled','text'], |
|||
data() { |
|||
return { |
|||
// radio: '1' |
|||
} |
|||
}, |
|||
mounted(){ |
|||
<script> |
|||
export default { |
|||
name: 'MyRadioGroup', |
|||
props: { |
|||
// 是否是纵向排列 |
|||
column:{ |
|||
type:Boolean, |
|||
default:false |
|||
}, |
|||
// 选项列表，格式为 [{ label: '显示文本', value: '值', disabled: false }] |
|||
options: { |
|||
type: Array, |
|||
required: true, |
|||
}, |
|||
// 当前选中的值，使用 v-model 绑定 |
|||
value: { |
|||
type: [String, Number, Boolean], |
|||
default: '', |
|||
}, |
|||
// 表单项的 label |
|||
label: { |
|||
type: String, |
|||
default: '', |
|||
}, |
|||
// 表单项的 prop（用于表单校验） |
|||
prop: { |
|||
type: String, |
|||
default: '', |
|||
}, |
|||
// 校验规则 |
|||
rules: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
selectedValue: this.value, // 内部维护的选中值 |
|||
}; |
|||
}, |
|||
watch: { |
|||
// 监听外部传入的 value 变化，更新内部 selectedValue |
|||
value(newVal) { |
|||
this.selectedValue = newVal; |
|||
}, |
|||
}, |
|||
methods: { |
|||
// 选中值变化时触发 |
|||
handleChange(value) { |
|||
this.$emit('input', value); // 更新 v-model |
|||
this.$emit('change', value); // 触发 change 事件 |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
/* 自定义样式 */ |
|||
.el-radio-group { |
|||
margin: 10px 0; |
|||
} |
|||
</style> |
|||
@ -1,23 +1,49 @@ |
|||
<template> |
|||
<el-select v-model="value" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-form-item |
|||
:style="Object.assign(style,{height:height},styleObject)" |
|||
:class="[{'column':column},{'w510':addClass=='w510'},{'w388':addClass=='w388'},'form-item']" |
|||
:label="label" :prop="prop" :rules="rules"> |
|||
|
|||
<p v-if="desc" class="desc_right">{{ desc }}</p> |
|||
|
|||
<el-select |
|||
:style="{width:width}" |
|||
v-model="value" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:disabled="item.disabled" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'GuipTextarea', |
|||
props:['options'], |
|||
data() { |
|||
return { |
|||
|
|||
value: '' |
|||
} |
|||
} |
|||
} |
|||
export default { |
|||
name: 'GuipTextarea', |
|||
props:['options','styleObject','disabled','defaultValue','placeholder', |
|||
'width','height','label','type','prop','rules','column','addClass','desc'], |
|||
data() { |
|||
return { |
|||
value: '', |
|||
style:{} |
|||
} |
|||
}, |
|||
defaultValue(newVal) { |
|||
console.log(newVal,'newVal'); |
|||
this.value = newVal; |
|||
}, |
|||
created(){ |
|||
// 默认值赋值 |
|||
if(this.defaultValue != null){ |
|||
this.value = this.defaultValue; |
|||
} |
|||
// 默认提示语 |
|||
if(this.placeholder){ |
|||
this.placeholder1 = this.placeholder; |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
@ -1,20 +1,52 @@ |
|||
<template> |
|||
<el-table |
|||
ref="guiptable" |
|||
:data="tableData" |
|||
height="250" |
|||
:border=true |
|||
style="width: 100%"> |
|||
<slot></slot> |
|||
:border="border" |
|||
@selection-change="handleSelectionChange" |
|||
:style="{width: width? width :'100%'}"> |
|||
<!-- 多选 --> |
|||
<template v-if="multiple"> |
|||
<el-table-column |
|||
type="selection" |
|||
width="55"> |
|||
</el-table-column> |
|||
</template> |
|||
<!-- 自定义header --> |
|||
<template v-if="autoColumn"> |
|||
<slot name="header"></slot> |
|||
</template> |
|||
<!-- 通过json数据遍历渲染 --> |
|||
<template v-if="columns"> |
|||
<el-table-column |
|||
v-for="column in columns" |
|||
:key="column.prop" |
|||
:prop="column.prop" |
|||
:label="column.label" |
|||
:width="column.width"> |
|||
</el-table-column> |
|||
</template> |
|||
|
|||
|
|||
</el-table> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'GuipTextarea', |
|||
props:['tableData'], |
|||
data() { |
|||
return { |
|||
} |
|||
} |
|||
name: 'GuipTextarea', |
|||
props:['tableData','width','autoColumn','columns','border','multiple'], |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods:{ |
|||
handleSelectionChange(row){ |
|||
// 获取的当前行信息 |
|||
console.log(row,'======'); |
|||
this.$emit('selectChange',row) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue