表单项组件化、政策入库流程重构

This commit is contained in:
zyn
2023-09-25 16:58:30 +08:00
parent 24577c7f3a
commit 37a3124c3a
25 changed files with 2888 additions and 12 deletions
@@ -0,0 +1,108 @@
<template>
<el-form-item :label="label" :prop="prop" class="add-form-item form-item-disabled">
<el-date-picker
:value="currentTime"
:picker-options="pickerOptions"
type="daterange"
range-separator=""
start-placeholder="起始时间"
end-placeholder="结束时间"
value-format="yyyy-MM-dd"
align="right"
@input="handleChange">
</el-date-picker>
</el-form-item>
</template>
<script>
export default {
name: "DataRangePickerFormItem",
props: {
startTime: {
type: String,
required: true
},
endTime: {
type: String,
required: true
},
prop: {
type: String
},
label: {
type: String,
},
disabled: {
type: Boolean,
default: false
},
clearable: {
type: Boolean,
default: true
},
editable: {
type: Boolean,
default: false
}
},
computed: {
placeholder () {
return `请选择${this.label}`
},
},
data () {
return {
currentTime: [],
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
}
},
created() {
this.currentTime = [this.startTime, this.endTime]
},
methods: {
handleChange (event) {
this.currentTime = event
const startTime = event[0]
const endTime = event[1]
this.$emit('update:startTime', startTime)
this.$emit('update:endTime', endTime)
}
}
}
</script>
<style scoped lang="less">
.add-form-item {
margin-bottom: 0;
min-height: 50px;
line-height: 50px;
border-bottom: 1px dashed #e5e5e5;
clear: both;
}
</style>
@@ -0,0 +1,61 @@
<template>
<el-form-item :label="label" :prop="prop" class="add-form-item form-item-disabled">
<el-datePicker :value="value"
:editable="editable"
:disabled="disabled"
:clearable="clearable"
:placeholder="placeholder"
value-format="yyyy-MM-dd"
@input="handleChange">
</el-datePicker>
</el-form-item>
</template>
<script>
export default {
name: "DatePickerFormItem",
props: {
value: {
required: true
},
prop: {
type: String
},
label: {
type: String,
},
disabled: {
type: Boolean,
default: false
},
clearable: {
type: Boolean,
default: true
},
editable: {
type: Boolean,
default: false
}
},
computed: {
placeholder () {
return `请选择${this.label}`
},
},
methods: {
handleChange (event) {
this.$emit('input', event)
}
}
}
</script>
<style scoped lang="less">
.add-form-item {
margin-bottom: 0;
min-height: 50px;
line-height: 50px;
border-bottom: 1px dashed #e5e5e5;
clear: both;
}
</style>
@@ -0,0 +1,163 @@
<!-- 多选时间组件 -->
<template>
<el-tooltip class="item" effect="dark" :content="label || config.attrName" placement="top-start">
<el-form-item
:label="label || config.attrName"
:prop="prop || config.attrField"
:label-width="label ? '210px' : '150px'"
class="add-form-item"
:class="{'form-item-disabled': disabled}"
>
<el-input
v-show="false"
:value="value"
:placeholder="placeholder"
:disabled="disabled"
></el-input>
<div class="date-picker-group">
<template v-for="(tag, index) in tagList">
<transition name="el-zoom-in-center">
<div class="tag-wrap" v-if="tagAnimateList.includes(tag)" :key="index">
<el-tag
size="small"
:closable="!disabled"
@close="handleRemoveTag(index)">{{ tag }}</el-tag>
</div>
</transition>
</template>
<div class="tag-wrap" v-if="datePickerVisible">
<el-date-picker
ref="datePicker"
v-model="datePickerVal"
type="date"
:placeholder="placeholder"
format="yyyy-MM-dd"
:picker-options="pickerOptions"
@input="handleChange"
>
</el-date-picker>
</div>
<div class="tag-wrap" v-else>
<el-button
:disabled="disabled"
class="add-date"
type="primary"
plain
size="mini"
@click="handleAddDate">增加日期</el-button>
</div>
</div>
</el-form-item>
</el-tooltip>
</template>
<script>
export default {
name: "DatePickerGroupFormItem",
data () {
return {
datePickerVal: '',
tagList: [],
datePickerVisible: false,
tagAnimateList: []
}
},
props: {
value: {
required: true
},
// label/props 和config 二选一
label: {
type: String,
},
prop: {
type: String
},
config: {
type: Object
},
disabled: {
type: Boolean,
default: false
},
},
computed: {
placeholder () {
return `请输入${this.label}`
},
pickerOptions () {
const _this = this
return {
disabledDate (time) {
return _this.tagList.includes(_this.$dateFormat(time, 'yyyy-MM-dd'))
}
}
}
},
watch: {
value (val) {
this.tagList = val !== '' && val !== null && val !== undefined ? val.split(',') : []
},
tagList: {
handler (val) {
setTimeout(() => {
this.tagAnimateList = JSON.parse(JSON.stringify(val))
})
}
}
},
mounted () {
this.tagList = this.value !== '' && this.value !== null && typeof (this.value) !== 'undefined' ? this.value.split(',') : []
},
methods: {
handleChange (value) {
const val = this.$dateFormat(value, 'yyyy-MM-dd')
this.tagList.push(val)
this.datePickerVisible = false
this.datePickerVal = ''
this.$emit('input', this.tagList.join(','))
},
handleAddDate () {
this.datePickerVisible = true
this.$nextTick(() => {
this.$refs.datePicker.focus()
})
},
handleRemoveTag (index) {
this.tagList.splice(index, 1)
this.$emit('input', this.tagList.join(','))
}
},
}
</script>
<style scoped lang="less">
.add-form-item {
height: auto;
min-height: 50px;
.date-picker-group {
min-height: 49px;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
padding-left: 10px;
.tag-wrap {
height: 50px;
display: inline-flex;
align-items: center;
margin-right: 5px;
user-select: none;
&:last-child {
margin-right: 0;
}
}
.add-date {
height: 24px;
padding: 0 8px;
line-height: 22px;
}
}
}
</style>
@@ -0,0 +1,89 @@
<template>
<div>
<el-form-item :label="label" :prop="prop" class="add-form-item form-item-disabled">
<el-input
:value="value"
:placeholder="placeholder"
:clearable="clearable"
readonly
@click.native="choice('dep', placeholder, ids)">
></el-input>
</el-form-item>
<Mechanism-tree
:is-title="choiceTitle"
:is-visible.sync="modalShowDepFlag"
:nodeList="nodeList"
@checkedRole="checkedRole"
></Mechanism-tree>
</div>
</template>
<script>
export default {
name: "DepartmentFormItem",
props: {
value: {
required: true
},
ids: {
required: true
},
prop: {
type: String
},
label: {
type: String,
},
disabled: {
type: Boolean,
default: false
},
clearable: {
type: Boolean,
default: true
},
},
data () {
return {
choiceTitle: '', // 人员选择
modalShowDepFlag: false,
nodeList: [],
}
},
computed: {
placeholder () {
return `选择${this.label}`
},
},
methods: {
choice(type, title, id='') {
this.nodeList = []
if (id) {
this.$set(this, 'nodeList', id.split(','))
}
this.choiceTitle = title
this.modalShowDepFlag = true
},
checkedRole(data) {
let idList = ''
let nameList = ''
data.forEach(item => {
if (nameList.length > 0) {
nameList += ','
idList += ','
}
idList += item.id
nameList += item.name
})
this.$emit('input', nameList)
this.$emit('update:ids', idList)
this.$emit('change')
},
}
}
</script>
<style scoped>
</style>
@@ -0,0 +1,385 @@
<template>
<div>
<el-form-item
:label="label"
:prop="prop"
:label-width="labelWidth"
class="add-form-item form-item-disabled"
>
<el-input
:value="value"
:placeholder="placeholder"
:disabled="disabled"
clearable
@input="handleChange"
></el-input>
<el-button
type="primary"
class="common-button-primary"
size="mini"
style="position:absolute;top: 10px;right: 0;"
@click="selectLaws"
v-if="(processModel && !disabled) || !processModel"
>手动查找</el-button>
</el-form-item>
<el-dialog
:title="label"
:visible.sync="replaceLawsNumModel"
width="875px"
:close-on-click-modal="false"
@close="replaceLawsNumModelCancel"
:append-to-body="true"
>
<div class="search-area">
<div class="left">
<el-form :modal="replaceLawsNumForm" :inline="true" class="label-input-form" @keyup.enter.native="getReplaceLawsNumRowSearch">
<!-- <el-form-item label="数据来源" class="search-item">-->
<!-- <el-select v-model="replaceLawsNumForm.dataSource" filterable>-->
<!-- <el-option-->
<!-- v-for="item in dataSourceOptions"-->
<!-- :key="item.value"-->
<!-- :value="item.value"-->
<!-- :label="item.label"-->
<!-- >-->
<!-- </el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label="政策编号" class="search-item input-width">
<el-input
v-model="replaceLawsNumForm.lawsNumber"
placeholder="根据政策编号查找"
clearable
:maxlength="100"></el-input>
</el-form-item>
<el-form-item label="政策名称" class="search-item input-width">
<el-input
v-model="replaceLawsNumForm.numberName"
placeholder="根据政策名称查找"
clearable
:maxlength="100"></el-input>
</el-form-item>
<el-form-item class="search-item btn-box">
<el-button
type="primary"
class="common-button-primary"
size="small"
@click="getReplaceLawsNumRowSearch">
查询
</el-button>
</el-form-item>
<el-form-item class="search-item btn-box">
<el-button
class="common-button-default"
size="small"
@click="getResetLawsNumRow">清空
</el-button>
</el-form-item>
</el-form>
</div>
</div>
<el-table
ref="selections"
:data="replaceLawsNumRow"
tooltip-effect="dark"
style="width: 100%;overflow-y: auto;overflow-x: hidden;"
border
:height="300"
:header-cell-style="{background: '#e8e8e8', color: '#333333', fontSize: '16px',
fontWeight: 'bold', height: '48px'}"
@selection-change="selectReplaceStandNumRowChange">
<el-table-column
type="selection"
width="55"
align="center">
</el-table-column>
<!-- <el-table-column-->
<!-- prop="standSortShow"-->
<!-- label="企标类别"-->
<!-- min-width="130"-->
<!-- >-->
<!-- </el-table-column>-->
<el-table-column
label="政策编号"
min-width="130">
<template slot-scope="scope">
<span>
<a v-if="scope.row.lawsNumber" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.lawsNumber }}</a>
</span>
</template>
</el-table-column>
<el-table-column
prop="lawsName"
label="中文名称"
min-width="130">
</el-table-column>
<el-table-column
prop="lawsName"
label="英文名称"
min-width="130">
</el-table-column>
<el-table-column
prop="issueTime"
label="发文日期"
width="130">
<template slot-scope="scope">{{ $moment(scope.row.issueTime).format('YYYY-MM-DD') }}</template>
</el-table-column>
<el-table-column
prop="standStatusShow"
label="文本状态"
width="130">
</el-table-column>
</el-table>
<loading :loading="replaceLoading">{{$t('m.dataAcquisition')}}</loading>
<!--分页-->
<pagination
style="position: relative;"
:page="replacePage"
:total="replaceTotal"
@pageChange="pageChangeReplace"
@pageSizeChange="pageSizeChangeReplace"></pagination>
<div slot="footer" class="demo-drawer-footer">
<el-button class="common-button-default" round icon="el-icon-close" @click="replaceLawsNumModel = false">取消</el-button>
<el-button type="primary" round class="common-button-primary" icon="el-icon-check" @click="replaceLawsNumModelBt">提交</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "InputForStandardsForLaws",
props: {
label: {
type: String,
required: true
},
prop: {
type: String,
required: true
},
value: {
required: true
},
disabled: {
type: Boolean,
default: false
},
// 栅格比例
span: {
type: Number,
default: 24
},
// 是否为流程中使用
processModel: {
type: Boolean,
default: false
},
// label宽度
labelWidth: {
type: String,
default: '150px'
}
},
data () {
return {
replaceLawsNumModel: false,
sarBussionessLawsEO: {
replaceLawsNum: ''
},
// 代替标准号
replaceLawsNumForm: {
dataSource: 'BUSINESS', // 数据来源
lawsNumber: '', // 政策编号
numberName: '', // 政策名称
page: 1,
pageSize: this.$store.getters.userInfo.configContent,
total: 0,
quoteIdList: '',
menuId: '',
validFlag: 0
},
replaceLawsNumRow: [], // 代替政策号 数组内容
replaceTotal: 0,
selectedListRep: [],
replaceLoading: true,
replacePage: 1,
// 数据搜索 数据来源list
dataSourceOptions: [
{value: 'INLAND_STAND', label: '国内标准法规'},
{value: 'FOREIGN_STAND', label: '海外标准法规'},
{value: 'BUSINESS', label: '企业标准 '},
{value: 'LAWS_STAND', label: '国内外政策'}
],
dataSource: 'LAWS_STAND'
}
},
computed: {
placeholder () {
return `请输入${this.label}`
},
showMessage () {
return `${this.label}不能为空`
},
},
methods: {
getReplaceLawsNumRowSearch () {
this.replaceLawsNumForm.page = 1
this.replacePage = 1
this.getReplaceLawsNumRow()
},
handleChange (event) {
// const value = event.target.value
const value = event
this.$emit('input', value)
},
selectLaws () {
// if (this.standNumFlag === 1) {
// this.$refs.selections.selectAll(false)
// }
// this.sarBussionessLawsEO.replaceLawsNum = ''
this.replaceLawsNumModel = true
this.getReplaceLawsNumRow()
},
// 代替政策号 请求数据
getReplaceLawsNumRow () {
if (this.sarBussionessLawsEO.replaceLawsNum !== null && this.sarBussionessLawsEO.replaceLawsNum !== '') {
this.replaceLawsNumForm.quoteIdList = this.quoteIdList1.toString() === '' ? '' : this.quoteIdList1
} else {
this.quoteIdList1 = []
this.replaceLawsNumForm.quoteIdList = ''
}
const formData = {
...this.replaceLawsNumForm
}
let url = 'lawss/sarLawsInfo/page'
this.$http.get(url, formData, {
_this: this,
loading: 'replaceLoading'
}, res => {
this.replaceLawsNumRow = res.data.list
this.replaceTotal = res.data.count
if (this.selectedListRep.length !== 0) {
this.selectedListRep.map((list) => {
this.replaceLawsNumRow.map((item) => {
if (list.id === item.id) {
item._checked = true
}
})
})
}
}, e => {
})
},
// 代替政策编号-取消
replaceLawsNumModelCancel () {
// this.replaceLawsNumModel = false
this.$refs.selections.clearSelection()
},
// 代替政策号 table选择事件
selectReplaceStandNumRowChange (row) {
this.selectedListRep = row
},
// 代替政策分页
pageChangeReplace (page) {
this.replacePage = page
this.replaceLawsNumForm.page = page
this.getReplaceLawsNumRow()
},
pageSizeChangeReplace (pageSize) {
// this.replaceRows = pageSize
this.replaceLawsNumForm.pageSize = pageSize
this.getReplaceLawsNumRow()
},
// 代替政策编号确定
replaceLawsNumModelBt () {
let textArr = []
if (typeof this.value === 'string') {
if (this.value) {
textArr = this.value.split(',')
}
}
if (this.selectedListRep.length === 0) {
return this.$message({
message: '请先选择数据',
type: 'warning'
})
}
if (this.selectedListRep.length + textArr.length > 20) {
return this.$message({
message: '代替文件号最多选择20项',
type: 'warning'
})
}
this.selectedListRep.map((item) => {
let texts = ''
// 判断数据是国内外法规标准还是企业标准
if (this.dataSource === 'LAWS_STAND') {
texts = item.lawsNumber
}
textArr.push(texts)
textArr = [...new Set(textArr)]
this.replaceLawsNumModel = false
})
// this.SarLawsInfoEO.replaceLawsNum = textArr.join(',')
this.$emit('input', textArr.join(','))
this.$refs.selections.clearSelection()
},
// 点击查看
handlePreview (item) {
let name = ''
let pageType = ''
switch (this.dataSource) {
case 'INLAND_STAND':
name = 'OtherStandardDetails'
pageType = 'INLAND_STAND'
break
case 'FOREIGN_STAND':
name = 'OtherStandardDetails'
pageType = 'FOREIGN_STAND'
break
case 'BUSINESS':
name = 'OtherBussStandardDetails'
pageType = 'BUSINESS_STAND'
break
case 'LAWS_STAND':
name = 'OtherLawsStandDetails'
pageType = 'LAWS_STAND'
break
}
let routeUrl = this.$router.resolve({
name: name,
params: {
id: item.id,
pageType: pageType
}
})
window.open(routeUrl.href, '_blank')
},
getResetLawsNumRow () {
this.replaceLawsNumForm = {
lawsNumber: '', // 政策编号
numberName: '', // 政策名称
page: 1,
pageSize: this.$store.getters.userInfo.configContent,
total: 0,
validFlag: '0'
}
this.getReplaceLawsNumRow()
}
}
}
</script>
<style scoped lang="less">
/deep/.el-dialog__body {
padding: 0 20px 0;
}
/deep/.el-dialog__footer {
padding: 0 20px 20px;
}
/deep/.input-width input.el-input__inner {
width: 220px;
}
</style>
@@ -0,0 +1,85 @@
<template>
<div class="wrapper">
<el-form-item :label="label" :prop="prop" class="add-form-item form-item-disabled">
<el-input
:value="value"
:placeholder="placeholder"
:clearable="clearable"
@input="handleChange"
></el-input>
</el-form-item>
<slot />
</div>
</template>
<script>
export default {
name: "InputFormItem",
props: {
value: {
required: true
},
prop: {
type: String
},
label: {
type: String,
},
disabled: {
type: Boolean,
default: false
},
clearable: {
type: Boolean,
default: true
},
},
computed: {
placeholder () {
return `请输入${this.label}`
},
},
methods: {
handleChange (event) {
this.$emit('input', event)
}
}
}
</script>
<style scoped lang="less">
.wrapper {
display: flex;
border-bottom: 1px dashed #e5e5e5;
}
.add-form-item {
margin-bottom: 0;
min-height: 50px;
line-height: 50px;
//border-bottom: 1px dashed #e5e5e5;
border-bottom: none;
clear: both;
flex: 1;
}
.add-form-item /deep/ .el-form-item__content .el-input .el-input__inner {
height: 45px;
//line-height: 49px;
//border: none;
//font-family: 'Microsoft Yahei', '\5FAE\8F6F\96C5\9ED1', Arial, sans-serif !important;
//font-weight: lighter;
}
//.add-form-item /deep/ .el-form-item__label {
// padding: 0;
// line-height: 50px;
// font-size: 14px;
// color: #333333;
// text-align: left;
// overflow: hidden;
// white-space: nowrap;
// text-overflow: ellipsis;
//}
//.form-item-disabled /deep/ .el-form-item__label {
// color: #666666;
// background: transparent;
//}
</style>
@@ -0,0 +1,46 @@
<template>
<el-collapse v-model="activeName" accordion>
<el-collapse-item title="回执说明" name="1">
<div style="margin: 10px 0;">
<el-input :disabled="disabled"
type="textarea"
:rows="3"
resize="none"
placeholder="请输入意见"
:value="value"
@input="handleChange">
</el-input>
</div>
</el-collapse-item>
</el-collapse>
</template>
<script>
export default {
name: "ReceiptDescription",
data () {
return {
activeName:'1',
}
},
props: {
value: {
type: String,
default: true
},
disabled: {
type: Boolean,
default: false
}
},
methods: {
handleChange (event) {
this.$emit('input', event)
}
}
}
</script>
<style scoped>
</style>
@@ -0,0 +1,99 @@
<template>
<el-form-item :label="label" :prop="prop" class="add-form-item form-item-disabled">
<el-select
:value="value"
:disabled="disabled"
:placeholder="placeholder"
:filterable="filterable"
:clearable="clearable"
@change="handleChange">
<el-option
v-for="item in options"
:key="item.value"
:value="item.value"
:label="item.label"
></el-option>
</el-select>
</el-form-item>
</template>
<script>
export default {
name: "SelectFormItem",
props: {
value: {
required: true
},
prop: {
type: String
},
label: {
type: String,
},
disabled: {
type: Boolean,
default: false
},
// 下拉选项
options: {
type: Array,
required: true
},
clearable: {
type: Boolean,
default: true
},
filterable: {
type: Boolean,
default: true
},
},
computed: {
placeholder () {
return `请选择${this.label}`
},
},
methods: {
handleChange (event) {
this.$emit('input', event)
}
}
}
</script>
<style scoped lang="less">
.add-form-item {
margin-bottom: 0;
min-height: 50px;
line-height: 50px;
border-bottom: 1px dashed #e5e5e5;
clear: both;
}
//.add-form-item /deep/ .el-form-item__content .el-input .el-input__inner {
// height: 45px;
// line-height: 49px;
// border: none;
// font-family: 'Microsoft Yahei', '\5FAE\8F6F\96C5\9ED1', Arial, sans-serif !important;
// font-weight: lighter;
//}
//.add-form-item /deep/ .el-form-item__label {
// padding: 0;
// line-height: 50px;
// font-size: 14px;
// color: #333333;
// text-align: left;
// overflow: hidden;
// white-space: nowrap;
// text-overflow: ellipsis;
//}
//.form-item-disabled /deep/ .el-form-item__label {
// color: #666666;
// background: transparent;
//}
//.add-form-item /deep/ .el-form-item__content .el-select {
// width: 100%;
//}
//.add-form-item /deep/ .el-input--suffix {
// padding-right: 30px;
//}
</style>
@@ -0,0 +1,80 @@
<template>
<el-form-item :label="label" :prop="prop" class="add-form-item form-item-disabled">
<el-select
:value="data"
multiple
:disabled="disabled"
:placeholder="placeholder"
:filterable="filterable"
:clearable="clearable"
@change="handleChange">
<el-option
v-for="item in options"
:key="item.value"
:value="item.value"
:label="item.label"
></el-option>
</el-select>
</el-form-item>
</template>
<script>
export default {
name: "SelectMultipleFormItem",
props: {
value: {
required: true
},
prop: {
type: String
},
label: {
type: String,
},
disabled: {
type: Boolean,
default: false
},
// 下拉选项
options: {
type: Array,
required: true
},
clearable: {
type: Boolean,
default: true
},
filterable: {
type: Boolean,
default: true
},
},
computed: {
placeholder () {
return `请选择${this.label}`
},
data () {
if (this.value && this.value !== '') {
return this.value.split(',')
} else {
return []
}
}
},
methods: {
handleChange (event) {
this.$emit('input', event.join(','))
}
}
}
</script>
<style scoped lang="less">
.add-form-item {
margin-bottom: 0;
min-height: 50px;
line-height: 50px;
border-bottom: 1px dashed #e5e5e5;
clear: both;
}
</style>
@@ -0,0 +1,96 @@
<template>
<el-timeline-item :timestamp="timestamp" placement="top" :color="name ? '#66b1ff' : ''" class="timeline-item">
<el-card>
<el-form-item :prop="prop" style="margin-bottom: 0">
<h4>{{ title }}</h4>
<div style="margin-top: 10px;width: 300px;">
<el-input
:disabled="disabled"
:value="name"
:placeholder="title"
readonly
@click.native="choice(id)"></el-input>
</div>
</el-form-item>
</el-card>
<Role-tree v-if="!disabled"
:check-box="!multiple"
:is-title="`选择${title}`"
:is-visible.sync="modalShowFlag"
@checkedRole="checkedRole"
:nodeList="nodeList"
></Role-tree>
</el-timeline-item>
</template>
<script>
export default {
name: "TimeLineFormItem",
props: {
id:{
type: String,
required: true
},
name:{
type: String,
required: true
},
prop: {
type: String
},
disabled: {
type: Boolean,
default: false
},
timestamp: {
type: String,
required: true
},
title: {
type: String,
required: true
},
multiple: {// 多选
type: Boolean,
default: false
}
},
data () {
return {
drawerTitle: '', //drawer标题
modalShowFlag: false, // drawer开关
nodeList: [],
}
},
methods: {
handleChange (event) {
this.$emit('input', event)
},
choice (id) {
this.nodeList = id.split(',')
this.modalShowFlag = true
},
checkedRole (data) {
const id = this.joint(data, 'id')
const name = this.joint(data, 'name')
this.$emit('update:id', id)
this.$emit('update:name', name)
},
joint (data, type) {
return data.reduce((init,item) => {
if (init === '') {
return item[type]
} else {
return init + ',' + item[type]
}
}, '')
}
}
}
</script>
<style scoped lang="less">
.timeline-item /deep/ .el-form-item__content{
margin: 0!important;
}
</style>
@@ -0,0 +1,208 @@
<template>
<el-form-item :label="label" :prop="prop" class="add-form-item form-item-disabled">
<el-input
disabled
style="display: none;"
:value="ids"
clearable
></el-input>
<div style="display: flex;justify-content: space-between">
<div style="width: 80%;margin-top: 13px">
<div v-for="file in FileList"
:key="file.id"
@click="onPreview(file)"
style="color: #409eff;cursor:pointer"
class="fileClass">
{{ file.name }}
</div>
</div>
<div style="width: 20%;">
<el-button :disabled="disabled"
type="primary"
class="common-button-primary"
size="mini"
@click="showUpload"
style="margin-left: 10px; margin-top: 11px; float: right;">
<i class="el-icon-upload"></i>
</el-button>
</div>
</div>
<el-dialog width='400px' :visible.sync="fileMadel" title="上传文件">
<el-upload
multiple
drag
:file-list="fileList"
:action="fileUrl"
ref="importfile"
name="file"
:accept="accept"
:before-upload="beforeUpload"
:on-success="onSuccess"
:on-preview="onPreview"
:on-remove="removeOneFile"
:show-file-list="true"
>
<div style="padding: 20px 0">
<i class="el-icon-upload" style="color: #3399ff"></i>
<p>点击或拖拽上传文件</p>
</div>
</el-upload>
</el-dialog>
</el-form-item>
</template>
<script>
export default {
name: "UploadFormItem",
props: {
ids: {
required: true,
type: String,
default: ''
},
names: {
required: true,
type: String
},
prop: {
type: String
},
label: {
type: String,
},
disabled: {
type: Boolean,
default: false
},
fileUrl: {
type: String,
default: () => 'api/att/attFile/uploadNew'
},
accept: {
type: String,
default: '.pdf, .PDF, .ppt, .PPT, .pptx, .PPTX, .doc, .DOC, .docx, .DOCX, .xls, .xlsx'
},
size: {
type: Number,
default: 200
}
},
created () {
this.initFileList()
},
data () {
return {
fileMadel: false,
fileList: [],// 用于el-upload
FileList: [],// 用于回显
}
},
methods: {
showUpload () {
this.fileMadel = true;
},
initFileList () {
if (this.ids && this.ids !== '' && this.names && this.names !== '') {
let fileList = []
const idArr = this.ids.split(',')
const nameArr = this.names.split(',')
for (let i = 0 ; i < idArr.length; i++) {
fileList.push({
id: idArr[i],
name: nameArr[i]
})
}
this.fileList = fileList
this.FileList = fileList
}
},
beforeUpload (file) {
const fileName = file.name
const fileSuffix = fileName.slice(fileName.lastIndexOf('.') + 1)
// 判断上传文件格式
const acceptArr = this.accept.split(',').map(type => type.slice(type.lastIndexOf('.') + 1))
if (acceptArr.includes(fileSuffix)) {
return true
} else {
this.$message.error('文件' + file.name + `格式不正确,请上传${acceptArr.join(',')}文件`)
return false
}
// 判断文件上传大小
if (file.size / 1024 / 1024 <= this.size) {
return true
} else {
this.$message.error('文件' + file.name + `大小不超过${this.size}M`)
return false
}
return true
},
// 导入标准数据成功后执行
onSuccess (response, file,fileList) {
// 上传成功后判断是否是两条数据是的话替换掉旧数据
if (response.ok) {
const fileObj = {
id: file.response.data.id,
name: file.response.data.name
}
let ids;
let names;
if (this.ids && this.ids.length > 0) {
ids = this.ids + ',' + fileObj.id
names = this.names + ',' + fileObj.name
} else {
ids = fileObj.id
names = fileObj.name
}
this.$set(this.FileList, this.FileList.length, fileObj)
this.$emit('update:ids', ids)
this.$emit('update:names', names)
this.$message({
message: response.message,
type: 'success'
})
}
},
removeOneFile(file, fileList) {
const ids = fileList.reduce((init, file) => {
if (init === '') {
return file.id || file.response.data.id
} else {
return init + ',' + (file.id || file.response.data.id)
}
}, '')
const names = fileList.reduce((init, file) => {
if (init === '') {
return file.name
} else {
return init + ',' + file.name
}
}, '')
this.FileList = fileList.map(file => ({
id: file.id || file.response.data.id,
name: file.name
}))
this.$emit('update:ids', ids)
this.$emit('update:names', names)
},
// 文件预览及下载
onPreview(file) {
let attId = ""
if(file && file.id){
attId = file.id
}else {
attId = file.response.data.id
}
this.$preview(attId)
},
}
}
</script>
<style scoped lang="less">
.fileClass{
line-height: 22px !important;
}
</style>
@@ -0,0 +1,104 @@
<template>
<div>
<el-form-item :label="label" :prop="prop" class="add-form-item form-item-disabled">
<el-input
:value="value"
:placeholder="placeholder"
:clearable="clearable"
readonly
@click.native="choice('role', placeholder, value)">
></el-input>
</el-form-item>
<Role-tree
:is-title="choiceTitle"
:is-visible.sync="modalShowRoleFlag"
@checkedRole="checkedRole"
:nodeList="nodeList"
></Role-tree>
</div>
</template>
<script>
export default {
name: "personFormItem",
props: {
value: {
required: true
},
prop: {
type: String
},
label: {
type: String,
},
disabled: {
type: Boolean,
default: false
},
clearable: {
type: Boolean,
default: true
},
},
data () {
return {
choiceTitle: '', // 人员选择
modalShowRoleFlag: false,
nodeList: [],
}
},
computed: {
placeholder () {
return `选择${this.label}`
},
},
methods: {
handleChange (event) {
this.$emit('input', event)
},
choice(type, title, nameId) {
this.nodeList = []
if (nameId) {
let nameId1 = nameId.split(',')
let idList = []
nameId1.forEach(item => {
let a, b
a = item.substring(item.indexOf('(') +1)
b = a.substring(0, a.lastIndexOf(')'))
idList.push(b)
})
idList = idList.join(',')
// 管理员(admin),张兰英(zhanglanying) => ['admin', 'zhanglanying']
this.nodeList = idList.split(',')
}
this.choiceTitle = title
this.modalShowRoleFlag = true
},
checkedRole(data) {
let idList = ''
let nameList = ''
data.forEach(item => {
if (nameList.length > 0) {
nameList += ','
idList += ','
}
idList += item.id
nameList += item.name
})
this.$emit('input', nameList)
this.$emit('change', {
ids: this.unique(data.map(item => item.topUnitId)).join(","),
names: this.unique(data.map(item => item.topUnit)).join(",")
})
},
unique(newArr) {
const res = new Map();
return newArr.filter((newArr) => !res.has(newArr) && res.set(newArr, 1));
},
}
}
</script>
<style scoped>
</style>