code init
This commit is contained in:
chenxiaoxi
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<!-- <div>-->
|
||||
<!-- </div>-->
|
||||
<el-col :span="span">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:title="config.attrName"
|
||||
:prop="config.attrField"
|
||||
label-width="150px"
|
||||
class="add-form-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
>
|
||||
<el-date-picker
|
||||
:value="value"
|
||||
type="date"
|
||||
:editable="true"
|
||||
:disabled="disabled"
|
||||
:placeholder="placeholder"
|
||||
@input="handleChange"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CusTomDataPicker',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 栅格比例
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请选择${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
},
|
||||
isString (str) {
|
||||
return (typeof str === 'string') && str.constructor === String
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange (value) {
|
||||
// const value = event.target.value
|
||||
this.$emit('input', value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,190 @@
|
||||
<!-- 多选时间组件 -->
|
||||
<template>
|
||||
<el-col :span="span">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
:label-width="labelWidth"
|
||||
class="add-form-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
>
|
||||
<el-input
|
||||
v-show="false"
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
clearable
|
||||
></el-input>
|
||||
<div class="date-picker-group" v-if="!disabled">
|
||||
<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"
|
||||
:disabled="disabled"
|
||||
:placeholder="placeholder"
|
||||
format="yyyy-MM-dd"
|
||||
:picker-options="pickerOptions"
|
||||
@input="handleChange"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="tag-wrap" v-else>
|
||||
<el-button
|
||||
class="add-date"
|
||||
type="primary"
|
||||
plain
|
||||
size="mini"
|
||||
@click="handleAddDate">增加日期</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="date-picker-group" v-else>
|
||||
<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>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CusTomDataPickerGroup',
|
||||
mixins: [],
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 栅格比例
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24
|
||||
},
|
||||
labelWidth: {
|
||||
type: String,
|
||||
default: '150px'
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
data () {
|
||||
return {
|
||||
datePickerVal: '',
|
||||
tagList: [],
|
||||
datePickerVisible: false,
|
||||
tagAnimateList: []
|
||||
}
|
||||
},
|
||||
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(','))
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请选择${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
},
|
||||
isString (str) {
|
||||
return (typeof str === 'string') && str.constructor === String
|
||||
},
|
||||
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.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(',') : []
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.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,272 @@
|
||||
<!-- 多选时间和可选N/A和TBD组件 -->
|
||||
<template>
|
||||
<el-col :span="span" class="date-picker-group-with-text">
|
||||
<div class="wrap">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
:label-width="labelWidth"
|
||||
class="add-form-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
:title="config.attrName"
|
||||
>
|
||||
<template v-if="radioValue === '1'">
|
||||
<el-input
|
||||
v-show="false"
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
clearable
|
||||
></el-input>
|
||||
<div class="date-picker-group" v-if="!disabled">
|
||||
<template v-for="(tag, index) in tagList">
|
||||
<transition name="el-zoom-in-center" :key="index">
|
||||
<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>
|
||||
<template v-if="!['EOPSSRQ'].includes(config.attrField) || tagList.length < 1">
|
||||
<div class="tag-wrap" v-if="datePickerVisible">
|
||||
<el-date-picker
|
||||
ref="datePicker"
|
||||
v-model="datePickerVal"
|
||||
type="date"
|
||||
:disabled="disabled"
|
||||
:placeholder="placeholder"
|
||||
format="yyyy-MM-dd"
|
||||
:picker-options="pickerOptions"
|
||||
@input="handleChange"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="tag-wrap tag-wrap-btn-box" v-else>
|
||||
<el-button
|
||||
class="add-date"
|
||||
type="primary"
|
||||
plain
|
||||
size="mini"
|
||||
@click="handleAddDate">增加日期</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="date-picker-group" v-else>
|
||||
<template v-for="(tag, index) in tagList">
|
||||
<transition name="el-zoom-in-center" :key="index">
|
||||
<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>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-input
|
||||
:value="value"
|
||||
v-if="radioValue !== '1'"
|
||||
disabled
|
||||
/>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="warp">
|
||||
<el-form-item label-width="10px">
|
||||
<el-radio-group :value="radioValue" :disabled="disabled">
|
||||
<el-radio label="1" @click.native="handleRadioChange('1')">时间</el-radio>
|
||||
<el-radio label="N/A" @click.native="handleRadioChange('N/A')">N/A</el-radio>
|
||||
<el-radio label="TBD" @click.native="handleRadioChange('TBD')">TBD</el-radio>
|
||||
<el-radio label="已实施" @click.native="handleRadioChange('已实施')">已实施</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
// 用于显示相关字段
|
||||
export const formatText = (str) => {
|
||||
if (moment(str).isValid()) {
|
||||
return moment(str).format('YYYY-MM-DD')
|
||||
} else {
|
||||
return str
|
||||
}
|
||||
}
|
||||
export default {
|
||||
name: 'CusTomDataPickerGroup',
|
||||
mixins: [],
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 栅格比例
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24
|
||||
},
|
||||
labelWidth: {
|
||||
type: String,
|
||||
default: '150px'
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
data () {
|
||||
return {
|
||||
datePickerVal: '',
|
||||
tagList: [],
|
||||
datePickerVisible: false,
|
||||
tagAnimateList: []
|
||||
}
|
||||
},
|
||||
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 () {
|
||||
if (this.tagList.length === 10) {
|
||||
this.$message({
|
||||
message: '日期选择上限为10个',
|
||||
type: 'warning'
|
||||
})
|
||||
} else {
|
||||
this.datePickerVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.datePicker.focus()
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
handleRemoveTag (index) {
|
||||
this.tagList.splice(index, 1)
|
||||
this.$emit('input', this.tagList.join(','))
|
||||
},
|
||||
// 时间、N/A、TBD切换事件
|
||||
handleRadioChange (val) {
|
||||
switch (val) {
|
||||
case '1':
|
||||
this.$emit('input', '')
|
||||
break
|
||||
case 'N/A':
|
||||
this.$emit('input', 'N/A')
|
||||
break
|
||||
case 'TBD':
|
||||
this.$emit('input', 'TBD')
|
||||
break
|
||||
case '已实施':
|
||||
this.$emit('input', '已实施')
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请选择${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
},
|
||||
isString (str) {
|
||||
return (typeof str === 'string') && str.constructor === String
|
||||
},
|
||||
pickerOptions () {
|
||||
const _this = this
|
||||
return {
|
||||
disabledDate (time) {
|
||||
return _this.tagList.includes(_this.$dateFormat(time, 'yyyy-MM-dd'))
|
||||
}
|
||||
}
|
||||
},
|
||||
radioValue () {
|
||||
const value = this.value
|
||||
if (value === 'N/A' || value === 'TBD' || value === '已实施') {
|
||||
return value
|
||||
} else {
|
||||
return '1'
|
||||
}
|
||||
}
|
||||
},
|
||||
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(',') : []
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.date-picker-group-with-text {
|
||||
display: flex;
|
||||
.wrap {
|
||||
&:first-child {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
.add-form-item {
|
||||
height: auto;
|
||||
min-height: 50px;
|
||||
/deep/.el-form-item{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.tag-wrap-btn-box{
|
||||
.add-date {
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/.el-form-item__error{
|
||||
right: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<!-- <div>-->
|
||||
<!-- </div>-->
|
||||
<el-col :span="span" class="date-picker-with-text">
|
||||
<div class="wrap">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
:label-width="labelWidth"
|
||||
class="add-form-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
:title="config.attrName"
|
||||
>
|
||||
<el-datePicker
|
||||
v-if="radioValue === '1'"
|
||||
:value="value"
|
||||
type="date"
|
||||
:editable="true"
|
||||
:disabled="disabled"
|
||||
:placeholder="placeholder"
|
||||
@input="handleChange"
|
||||
></el-datePicker>
|
||||
<el-input
|
||||
:value="value"
|
||||
v-if="radioValue !== '1'"
|
||||
disabled
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="warp">
|
||||
<el-form-item label-width="10px">
|
||||
<el-radio-group :value="radioValue" :disabled="disabled">
|
||||
<el-radio label="1" @click.native="handleRadioChange('1')">时间</el-radio>
|
||||
<el-radio label="N/A" @click.native="handleRadioChange('N/A')">N/A</el-radio>
|
||||
<el-radio label="TBD" @click.native="handleRadioChange('TBD')">TBD</el-radio>
|
||||
<el-radio label="已实施" @click.native="handleRadioChange('已实施')">已实施</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DatePickerWithText',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 栅格比例
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24
|
||||
},
|
||||
labelWidth: {
|
||||
type: String,
|
||||
default: '150px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// radioValue: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请选择${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
},
|
||||
isString (str) {
|
||||
return (typeof str === 'string') && str.constructor === String
|
||||
},
|
||||
radioValue() {
|
||||
const value = this.value
|
||||
if (value === 'N/A' || value === 'TBD' || value === '已实施') {
|
||||
return value
|
||||
} else {
|
||||
return '1'
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
immediate: true,
|
||||
handler: (newValue, oldValue) => {
|
||||
// console.log(newValue)
|
||||
// if (newValue === 'N/A') {
|
||||
// this.radioValue = 'N/A'
|
||||
// } else if (newValue === 'TBD') {
|
||||
// this.radioValue = 'TBD'
|
||||
// } else {
|
||||
// this.radioValue = '1'
|
||||
// }
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange (value) {
|
||||
// const value = event.target.value
|
||||
this.$emit('input', this.$moment(value).format('YYYY-MM-DD'))
|
||||
},
|
||||
handleRadioChange (val) {
|
||||
switch (val) {
|
||||
case '1':
|
||||
this.$emit('input', '')
|
||||
break
|
||||
case 'N/A':
|
||||
this.$emit('input', 'N/A')
|
||||
break
|
||||
case 'TBD':
|
||||
this.$emit('input', 'TBD')
|
||||
break
|
||||
case '已实施':
|
||||
this.$emit('input', '已实施')
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.date-picker-with-text {
|
||||
display: flex;
|
||||
.wrap {
|
||||
&:first-child {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/.el-form-item{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
/deep/.el-form-item__error{
|
||||
right: 0 !important;
|
||||
left: 100px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<!-- <div>-->
|
||||
<!-- </div>-->
|
||||
<el-col :span="span" class="date-picker-with-text">
|
||||
<div class="wrap">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
:label-width="labelWidth"
|
||||
class="add-form-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
:title="config.attrName"
|
||||
>
|
||||
<el-datePicker
|
||||
v-if="radioValue === '1'"
|
||||
:value="value"
|
||||
type="date"
|
||||
:editable="true"
|
||||
:disabled="disabled"
|
||||
:placeholder="placeholder"
|
||||
@input="handleChange"
|
||||
></el-datePicker>
|
||||
<el-input
|
||||
:value="value"
|
||||
v-if="radioValue !== '1'"
|
||||
disabled
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="warp">
|
||||
<el-form-item label-width="10px">
|
||||
<el-radio-group :value="radioValue" :disabled="disabled">
|
||||
<el-radio label="1" @click.native="handleRadioChange('1')">时间</el-radio>
|
||||
<el-radio label="已发布" @click.native="handleRadioChange('已发布')">已发布</el-radio>
|
||||
<el-radio label="TBD" @click.native="handleRadioChange('TBD')">TBD</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DatePickerWithText2',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 栅格比例
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24
|
||||
},
|
||||
labelWidth: {
|
||||
type: String,
|
||||
default: '150px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// radioValue: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请选择${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
},
|
||||
isString (str) {
|
||||
return (typeof str === 'string') && str.constructor === String
|
||||
},
|
||||
radioValue() {
|
||||
const value = this.value
|
||||
if (value === '已发布' || value === 'TBD') {
|
||||
return value
|
||||
} else {
|
||||
return '1'
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
immediate: true,
|
||||
handler: (newValue, oldValue) => {
|
||||
// console.log(newValue)
|
||||
// if (newValue === 'N/A') {
|
||||
// this.radioValue = 'N/A'
|
||||
// } else if (newValue === 'TBD') {
|
||||
// this.radioValue = 'TBD'
|
||||
// } else {
|
||||
// this.radioValue = '1'
|
||||
// }
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange (value) {
|
||||
if (value) {
|
||||
this.$emit('input', this.$moment(value).format('YYYY-MM-DD'))
|
||||
} else {
|
||||
this.$emit('input', '')
|
||||
}
|
||||
},
|
||||
handleRadioChange (val) {
|
||||
switch (val) {
|
||||
case '1':
|
||||
this.$emit('input', '')
|
||||
break
|
||||
case '已发布':
|
||||
this.$emit('validate')
|
||||
this.$emit('input', '已发布')
|
||||
break
|
||||
case 'TBD':
|
||||
this.$emit('validate')
|
||||
this.$emit('input', 'TBD')
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.date-picker-with-text {
|
||||
display: flex;
|
||||
.wrap {
|
||||
&:first-child {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/.el-form-item{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
/deep/.el-form-item__error{
|
||||
right: 0 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div>
|
||||
<Form v-if="reload" ref="sarStandardsInfoForm" :model="sarStandardsInfoEO" :rules="rules" class="label-input-form">
|
||||
<template v-for="item in formFieldList">
|
||||
<template v-if="item.attrType === 'INPUT_STR'">
|
||||
<custom-input :key="item.attrField" :config="item" v-model="sarStandardsInfoEO[item.attrField]"></custom-input>
|
||||
</template>
|
||||
<template v-else-if="item.attrType === 'DATE_PICKER'">
|
||||
<custom-date-pick :key="item.attrField" :config="item" v-model="sarStandardsInfoEO[item.attrField]"></custom-date-pick>
|
||||
</template>
|
||||
<template v-else-if="item.attrType === 'FILE'">
|
||||
<custom-file :key="item.attrField" :config="item" v-model="sarStandardsInfoEO[item.attrField]"></custom-file>
|
||||
</template>
|
||||
<template v-else-if="item.attrType === 'TEXTAREA'">
|
||||
<custom-textarea :key="item.attrField" :config="item" v-model="sarStandardsInfoEO[item.attrField]"></custom-textarea>
|
||||
</template>
|
||||
</template>
|
||||
<button @click="jiaoyan">aaaaa</button>
|
||||
</Form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomInput from './Input'
|
||||
import CustomTextarea from './Textarea'
|
||||
import CustomSearchSelect from './SearchSelect'
|
||||
import CustomDatePick from './DatePicker'
|
||||
import CustomFile from './File'
|
||||
|
||||
export default {
|
||||
name: 'Example',
|
||||
components: {
|
||||
CustomFile,
|
||||
CustomInput,
|
||||
CustomTextarea,
|
||||
CustomSearchSelect,
|
||||
CustomDatePick
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
reload: true,
|
||||
sarStandardsInfoEO: {
|
||||
TEST_AA: new Date(1602518400000)
|
||||
},
|
||||
formFieldList: [
|
||||
{
|
||||
'id': 'BR8CW5Z8ERZXSMQ9QPE7',
|
||||
'attrField': 'TEST',
|
||||
'attrName': '测试1',
|
||||
'attrType': 'INPUT_STR',
|
||||
'orderNum': 1,
|
||||
'isEdit': '0',
|
||||
'creationUser': 'WY8J26MH23',
|
||||
'validFlag': '0',
|
||||
'creationTime': '2020-10-11',
|
||||
'modifyTime': '2020-10-11',
|
||||
'attrLen': 100,
|
||||
'attrValue': null,
|
||||
'isMust': '1',
|
||||
'isShowImp': '0',
|
||||
'showRegionId': '1'
|
||||
},
|
||||
{
|
||||
'id': 'TKLUW3KLVYJHMWFTFY7U',
|
||||
'attrField': 'TEST_AA',
|
||||
'attrName': '测试2',
|
||||
'attrType': 'DATE_PICKER',
|
||||
'orderNum': 2,
|
||||
'isEdit': '0',
|
||||
'creationUser': 'WY8J26MH23',
|
||||
'validFlag': '0',
|
||||
'creationTime': '2020-10-11',
|
||||
'modifyTime': '2020-10-11',
|
||||
'attrLen': 10,
|
||||
'attrValue': null,
|
||||
'isMust': '0',
|
||||
'isShowImp': '0',
|
||||
'showRegionId': '3'
|
||||
},
|
||||
{
|
||||
'id': '89EYDA3XNBJBS7368LR6',
|
||||
'attrField': 'TEST_BB',
|
||||
'attrName': '测试3',
|
||||
'attrType': 'FILE',
|
||||
'orderNum': 3,
|
||||
'isEdit': '0',
|
||||
'creationUser': 'WY8J26MH23',
|
||||
'validFlag': '0',
|
||||
'creationTime': '2020-10-11',
|
||||
'modifyTime': '2020-10-11',
|
||||
'attrLen': 500,
|
||||
'attrValue': null,
|
||||
'isMust': '1',
|
||||
'isShowImp': '0',
|
||||
'showRegionId': '5'
|
||||
},
|
||||
{
|
||||
'id': 'CB2W6LMLSH3D4V27ZL9A',
|
||||
'attrField': 'TEST_CC',
|
||||
'attrName': '测试4',
|
||||
'attrType': 'TEXTAREA',
|
||||
'orderNum': 4,
|
||||
'isEdit': '0',
|
||||
'creationUser': 'WY8J26MH23',
|
||||
'validFlag': '0',
|
||||
'creationTime': '2020-10-11',
|
||||
'modifyTime': '2020-10-11',
|
||||
'attrLen': 500,
|
||||
'attrValue': null,
|
||||
'isMust': '1',
|
||||
'isShowImp': '0',
|
||||
'showRegionId': '4'
|
||||
}
|
||||
],
|
||||
rules: {}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.resolveFormFieldListRules()
|
||||
console.log(this.$dateFormat(1602518400000, 'yyyy-MM-dd hh:mm:ss'))
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 生成校验规则
|
||||
*/
|
||||
resolveFormFieldListRules () {
|
||||
this.reload = false
|
||||
const formFieldList = this.formFieldList
|
||||
const rules = {}
|
||||
formFieldList.forEach((item) => {
|
||||
const rule = []
|
||||
if (item.isMust === '0' && item.attrType !== 'DATE_PICKER') {
|
||||
rule.push({ required: true, message: `${item.attrName}不能为空`, trigger: 'blur' })
|
||||
}
|
||||
if (item.isMust === '0' && item.attrType === 'DATE_PICKER') {
|
||||
rule.push({required: true, type: 'date', message: `${item.attrName}不能为空`, trigger: 'change'})
|
||||
}
|
||||
if (item.attrLen && item.attrType !== 'DATE_PICKER' && item.attrType !== 'SEL_OPTION') {
|
||||
rule.push({type: 'string', max: item.attrLen, message: `${item.attrName}不能超过${item.attrLen}个字符`, trigger: 'blur'})
|
||||
}
|
||||
if (rule.length > 0) {
|
||||
// this.$set(this.rules, item.attrField, rule)
|
||||
rules[item.attrField] = rule
|
||||
}
|
||||
})
|
||||
// this.rules = rules
|
||||
this.$set(this, 'rules', rules)
|
||||
|
||||
setTimeout(() => {
|
||||
this.reload = true
|
||||
}, 1)
|
||||
// this.$nextTick(() => {
|
||||
// this.$refs['sarStandardsInfoForm'].resetFields()
|
||||
// })
|
||||
},
|
||||
jiaoyan () {
|
||||
this.$refs['sarStandardsInfoForm'].validate((valid) => {
|
||||
console.log(valid)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,460 @@
|
||||
<template>
|
||||
<!-- <div>-->
|
||||
<el-col :span="span">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
:label-width="labelWidth"
|
||||
class="add-form-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
>
|
||||
<ul class="file-file__wrap" v-if="showFileModel">
|
||||
<li class="file-item"
|
||||
v-for="(file, index) in showFileList"
|
||||
:key="index"
|
||||
:title="file.name"
|
||||
@click="handlePreview(file)">{{ file.name }}</li>
|
||||
<el-button
|
||||
size="small"
|
||||
@click="clickButtonToUpload('opinionFileList')"
|
||||
icon="el-icon-upload"
|
||||
class="form-upload-btn"
|
||||
v-if="reUpload || showUploadBtn">{{ uploadText || '重新上传' }}</el-button>
|
||||
</ul>
|
||||
<template style="margin-left: 105px;" v-else>
|
||||
<el-button
|
||||
size="small"
|
||||
@click="clickButtonToUpload('opinionFileList')"
|
||||
icon="el-icon-upload"
|
||||
class="form-upload-btn"
|
||||
>
|
||||
{{ (value === 'null' || value === '' || value == null) && (!processModel || (processModel && !disabled)) ? '点击上传' : '查看已上传的文件' }}
|
||||
</el-button>
|
||||
</template>
|
||||
<el-dialog
|
||||
width='400px'
|
||||
:visible.sync="importModalshowflagtemp"
|
||||
:title="processModel && disabled ? '查看已上传的文件' : (title || '导入文件')"
|
||||
:footer-hide="true"
|
||||
append-to-body
|
||||
>
|
||||
<el-upload
|
||||
class="customer-upload"
|
||||
:class="{'disabled': disabled}"
|
||||
multiple
|
||||
drag
|
||||
:show-file-list="showUploadlist"
|
||||
:on-success="uploadSuccess"
|
||||
:before-upload="beforeUpload"
|
||||
:on-remove="removeOneFile"
|
||||
:action="uploadPath"
|
||||
:limit="limit"
|
||||
:on-exceed="handleExceed"
|
||||
:on-preview="handlePreview"
|
||||
name="file"
|
||||
:file-list="defaultFileList"
|
||||
:disabled="disabled"
|
||||
ref="importFileAboutStand">
|
||||
<i :class="iconClass"></i>
|
||||
<div class="el-upload__text">{{ tips }}</div>
|
||||
</el-upload>
|
||||
</el-dialog>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- </div>-->
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getConvertFileByAttId } from 'api/process'
|
||||
export default {
|
||||
name: 'CustomFile',
|
||||
data() {
|
||||
return {
|
||||
showUploadlist: true, // 导入过程中新增数据时，如果数据错误，不出现导入列表
|
||||
uploadPath: 'api/att/attFile/upload',
|
||||
defaultFileList: [], // 默认显示
|
||||
showFileList: [],
|
||||
importModalshowflagtemp: false
|
||||
}
|
||||
},
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 指定允许上传的类型
|
||||
allowType: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return ['.pdf', '.PDF', '.doc','.DOC', '.docx','.DOCX', '.pptx', '.PPTX', '.ppt', '.PPT', '.jpg','.JPG','.jpeg','.JPEG', '.PNG', '.png', '.xls','.XLS', '.xlsx','.XLSX']
|
||||
}
|
||||
},
|
||||
// 栅格比例
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24
|
||||
},
|
||||
// 是否为流程使用
|
||||
processModel: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
labelWidth: {
|
||||
type: String,
|
||||
default: '150px'
|
||||
},
|
||||
// 点击文件在线预览
|
||||
preview: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否可重新上传
|
||||
reUpload: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 8
|
||||
},
|
||||
exceed: {
|
||||
type: String
|
||||
},
|
||||
// 只展示上传的文件,不展示查看已上传的文件按钮
|
||||
showFileModel: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
uploadText: {
|
||||
type: String
|
||||
},
|
||||
showUploadBtn: {
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
if (this.showFileModel) {
|
||||
this.getShowFileList()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.showFileModel) {
|
||||
this.getShowFileList()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder() {
|
||||
return `请输入${this.config.attrName}`
|
||||
},
|
||||
showMessage() {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired() {
|
||||
return !!this.config.isMust
|
||||
},
|
||||
title() {
|
||||
return this.config.title
|
||||
},
|
||||
tips() {
|
||||
if (this.processModel && this.reUpload) {
|
||||
return '点击重新上传附件'
|
||||
} else if (this.processModel && this.disabled && this.preview) {
|
||||
return '点击名称在线查看'
|
||||
} else if (this.processModel && this.disabled) {
|
||||
return '点击名称下载附件'
|
||||
} else {
|
||||
return '点击或拖拽上传文件'
|
||||
}
|
||||
},
|
||||
iconClass() {
|
||||
if (this.processModel && this.reUpload) {
|
||||
return 'el-icon-upload'
|
||||
} else if (this.processModel && this.disabled && this.preview) {
|
||||
return 'el-icon-view'
|
||||
} else if (this.processModel && this.disabled) {
|
||||
return 'el-icon-download'
|
||||
} else {
|
||||
return 'el-icon-upload'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleExceed(files, fileList) {
|
||||
if (this.exceed) {
|
||||
this.$message.warning(this.exceed)
|
||||
} else {
|
||||
this.$message.warning(`当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
|
||||
}
|
||||
},
|
||||
beforeUpload(file) {
|
||||
var filename = file.name
|
||||
var index1 = filename.lastIndexOf('.')
|
||||
var index2 = filename.length
|
||||
var fileSuffix = filename.substring(index1, index2)
|
||||
fileSuffix = fileSuffix.toLocaleLowerCase()
|
||||
// 判断上传文件格式
|
||||
if (!this.allowType.includes(fileSuffix)) {
|
||||
this.$message.error(`文件${file.name}格式不正确，请上传${this.allowType.join('、')}文件`)
|
||||
return false
|
||||
}
|
||||
// 判断文件上传大小
|
||||
if (file.size / 1024 / 1024 > 200) {// eslint-disable-line
|
||||
this.$message.error('文件' + file.name + '大小不超过200M')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
handleChange(event) {
|
||||
const value = event.target.value
|
||||
this.$emit('input', value)
|
||||
},
|
||||
clickButtonToUpload(current) {
|
||||
this.importModalshowflagtemp = true
|
||||
this.$refs.importFileAboutStand && this.$refs.importFileAboutStand.clearFiles()
|
||||
this.defaultFileList = []
|
||||
if (this.value === 'null' || this.value == null) {
|
||||
// this.value = ''
|
||||
this.$emit('input', '')
|
||||
}
|
||||
let fileList
|
||||
if (this.value != null && this.value !== '') {
|
||||
let paramefile = this.value
|
||||
if (paramefile.charAt(paramefile.length - 1) === ',') {
|
||||
paramefile = paramefile.substring(0, paramefile.length - 1)
|
||||
}
|
||||
this.$http.get('att/attFile/getMultiFileInfos', {
|
||||
fileIds: paramefile
|
||||
}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
fileList = res.data
|
||||
if (fileList != null && fileList.length > 0) {
|
||||
for (let i = 0; i < fileList.length; i++) {
|
||||
let obj = {name: '', response: {}}
|
||||
obj.name = fileList[i].oldFileName
|
||||
obj.response.data = fileList[i]
|
||||
this.defaultFileList.push(obj)
|
||||
}
|
||||
}
|
||||
}, e => {
|
||||
})
|
||||
}
|
||||
},
|
||||
uploadSuccess(res, file, fileList) {
|
||||
if (res.ok) {
|
||||
// this.value += res.data.id + ','
|
||||
this.$emit('input', this.value + res.data.id + ',')
|
||||
this.$emit('success')
|
||||
this.$message({
|
||||
message: '文件上传成功',
|
||||
type: 'success'
|
||||
})
|
||||
switch (this.config.attrField) {
|
||||
case 'recordsAttr':
|
||||
this.$emit('recordsAttrTime', res.data.uploadTime)
|
||||
break
|
||||
case 'signAttr':
|
||||
this.$emit('signAttrTime', res.data.uploadTime)
|
||||
break
|
||||
case 'otherAttr':
|
||||
this.$emit('otherAttrTime', res.data.uploadTime)
|
||||
break
|
||||
}
|
||||
// 国内外标准法规返回文件上传成功状态
|
||||
this.$emit('fileSuccess', true)
|
||||
// this.importModalshowflagtemp = false
|
||||
} else {
|
||||
this.$message({
|
||||
message: res.message,
|
||||
type: 'error'
|
||||
})
|
||||
fileList.pop()
|
||||
}
|
||||
},
|
||||
removeOneFile(file, fileList) {
|
||||
const value = this.value
|
||||
let ids = value.split(',')
|
||||
if (file.response) {
|
||||
let fileIds = file.response.data.id
|
||||
let newIdList = this.removeArray(ids, fileIds)
|
||||
let newStr = ''
|
||||
if (newIdList != null && newIdList.length > 0) {
|
||||
for (let i = 0; i < newIdList.length; i++) {
|
||||
if (newIdList[i] !== '') {
|
||||
newStr += newIdList[i] + ','
|
||||
}
|
||||
}
|
||||
this.$emit('input', newStr)
|
||||
} else {
|
||||
this.$emit('input', '')
|
||||
}
|
||||
}
|
||||
|
||||
const showFileList = []
|
||||
fileList.map(item => {
|
||||
let obj = {name: '', response: {}}
|
||||
obj.name = item.response.data.oldFileName
|
||||
obj.response.data = item.response.data
|
||||
showFileList.push(obj)
|
||||
})
|
||||
this.showFileList = showFileList
|
||||
},
|
||||
// 删除数组中的某个对象
|
||||
removeArray(_arr, _obj) {
|
||||
var length = _arr.length
|
||||
for (var i = 0; i < length; i++) {
|
||||
if (_arr[i] === _obj) {
|
||||
if (i === 0) {
|
||||
_arr.shift() // 删除并返回数组的第一个元素
|
||||
return _arr
|
||||
} else if (i === length - 1) {
|
||||
_arr.pop() // 删除并返回数组的最后一个元素
|
||||
return _arr
|
||||
} else {
|
||||
_arr.splice(i, 1) // 删除下标为i的元素
|
||||
return _arr
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 文件预览
|
||||
handlePreview(file) {
|
||||
const attId = file.response.data.id
|
||||
if (this.preview) {
|
||||
this.getConvertFileByAttId(attId)
|
||||
.then(res => {
|
||||
switch (res.convertState) {
|
||||
case 'ERROR':
|
||||
this.$message.warning('文档转换失败')
|
||||
break
|
||||
case 'LODING':
|
||||
this.$message.info('文档转换中，请稍后查看')
|
||||
break
|
||||
case 'SUCCESS':
|
||||
const { convertFileInfo } = res
|
||||
window.open('/static/pdf/web/viewer.html?file=' + encodeURIComponent('/api/att/attFile/getFileInfo?fileId=' + convertFileInfo.id))
|
||||
break
|
||||
}
|
||||
}).catch(e => {
|
||||
this.$message.warning('文档转换失败')
|
||||
})
|
||||
} else {
|
||||
if (attId) {
|
||||
window.location.href = '/api/att/attFile/downloadFileForSar?fileId=' + attId
|
||||
} else {
|
||||
this.$message.warning('文件不存在,下载失败')
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 读取文档转换后的文件
|
||||
getConvertFileByAttId(attId) {
|
||||
return new Promise((resolve, reject) => {
|
||||
getConvertFileByAttId({
|
||||
attId
|
||||
}).then(res => {
|
||||
if (res.ok && res.data.convertState) {
|
||||
resolve(res.data)
|
||||
} else {
|
||||
reject()
|
||||
}
|
||||
}).catch(e => {
|
||||
reject(e)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 获取展示的文件
|
||||
* @author: chenxiaoxi
|
||||
* @time: 2021-03-30 17:03:36
|
||||
*/
|
||||
getShowFileList() {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (this.value && this.value !== '') {
|
||||
let paramefile = this.value
|
||||
if (paramefile.charAt(paramefile.length - 1) === ',') {
|
||||
paramefile = paramefile.substring(0, paramefile.length - 1)
|
||||
}
|
||||
this.$http.get('att/attFile/getMultiFileInfos', {
|
||||
fileIds: paramefile
|
||||
}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
const fileList = res.data, showFileList = []
|
||||
if (fileList && fileList.length) {
|
||||
fileList.map(file => {
|
||||
let obj = {name: '', response: {}}
|
||||
obj.name = file.oldFileName
|
||||
obj.response.data = file
|
||||
showFileList.push(obj)
|
||||
})
|
||||
}
|
||||
this.showFileList = showFileList
|
||||
resolve()
|
||||
}, e => {
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.customer-upload {
|
||||
&.disabled {
|
||||
/deep/ .el-upload-dragger {
|
||||
.el-upload__text {
|
||||
color: #ccc;
|
||||
}
|
||||
&:hover {
|
||||
cursor: not-allowed;
|
||||
border-color: #d9d9d9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/ .el-form-item__error {
|
||||
right: 150px !important;
|
||||
}
|
||||
/deep/ .el-upload-dragger {
|
||||
[class^="el-icon-"] {
|
||||
font-size: 67px;
|
||||
color: #C0C4CC;
|
||||
margin: 40px 0 16px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
.file-file__wrap {
|
||||
position: relative;
|
||||
& > li{
|
||||
width: calc(~'100% - 100px');
|
||||
}
|
||||
}
|
||||
.file-item {
|
||||
color: rgba(64, 158, 255, 0.8);
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: rgba(64, 158, 255, 1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<!-- <div>-->
|
||||
<!-- </div>-->
|
||||
<el-col :span="span">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:title="config.attrName"
|
||||
:prop="config.attrField"
|
||||
label-width="155px"
|
||||
class="add-form-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
>
|
||||
<el-date-picker
|
||||
:value="value"
|
||||
type="date"
|
||||
:editable="true"
|
||||
:disabled="true"
|
||||
:placeholder="placeholder"
|
||||
@input="handleChange"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CusTomDataPicker',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 栅格比例
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请选择${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
},
|
||||
isString (str) {
|
||||
return (typeof str === 'string') && str.constructor === String
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange (value) {
|
||||
// const value = event.target.value
|
||||
this.$emit('input', value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<!-- <div>-->
|
||||
<el-col :span="span">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
label-width="150px"
|
||||
class="add-form-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
>
|
||||
<el-input
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
clearable
|
||||
@input="handleChange"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- </div>-->
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CustomInput',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 栅格比例
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请输入${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange (event) {
|
||||
// const value = event.target.value
|
||||
const value = event
|
||||
console.log(value)
|
||||
this.$emit('input', value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,334 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
:label-width="labelWidth"
|
||||
class="add-form-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
>
|
||||
<el-input
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
clearable
|
||||
@input="handleChange"
|
||||
></el-input>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="common-button-primary"
|
||||
round
|
||||
style="position:absolute;top: 10px;right: 0;"
|
||||
@click="selectLaws"
|
||||
v-if="(processModel && !disabled) || !processModel"
|
||||
>{{config.attrField === 'releventStand' ? '选择标准' :'手动查找'}}</el-button>
|
||||
</el-form-item>
|
||||
<el-dialog
|
||||
:title="config.attrName"
|
||||
: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="getReplaceLawsNumRowInfo">
|
||||
<el-form-item label="编号/名称" class="search-item">
|
||||
<el-input v-model="replaceLawsNumForm.standNumber" placeholder="根据编号/名称查找" clearable :maxlength="100"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="国内/海外" class="search-item">
|
||||
<el-select
|
||||
v-model="replaceLawsNumForm.standType"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option value="ALL" label="全部"></el-option>
|
||||
<el-option value="INLAND" label="国内"></el-option>
|
||||
<el-option value="FOREIGN" label="海外"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="search-item btn-box">
|
||||
<el-button
|
||||
icon="el-icon-search"
|
||||
type="primary"
|
||||
class="common-button-primary"
|
||||
round
|
||||
@click="getReplaceLawsNumRowInfo">
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item class="search-item btn-box">
|
||||
<el-button
|
||||
class="common-button-default"
|
||||
icon="el-icon-refresh-left"
|
||||
round
|
||||
type="default"
|
||||
@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
|
||||
label="标准编号"
|
||||
width="130">
|
||||
<template slot-scope="scope">
|
||||
<a v-if="scope.row.standYear" @click="handlePreview(scope.row)">{{ scope.row.standSort }} {{ scope.row.standNumber }}-{{ scope.row.standYear }}</a>
|
||||
<a v-else @click="handlePreview(scope.row)">{{ scope.row.standSort }} {{ scope.row.standNumber }}</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="standName"
|
||||
label="标准名称"
|
||||
width="130">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="issueTime"
|
||||
label="发布日期"
|
||||
width="130">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="putTime"
|
||||
label="实施日期"
|
||||
width="130">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="standNatureShow"
|
||||
label="标准性质"
|
||||
width="130">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="standStateShow"
|
||||
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 round class="common-button-default" 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: 'CustomInput',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
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: {
|
||||
standNumber: '', // 政策编号
|
||||
page: 1,
|
||||
pageSize: this.$store.getters.userInfo.configContent,
|
||||
total: 0,
|
||||
standType: 'ALL',
|
||||
quoteIdList: '',
|
||||
validFlag: '0',
|
||||
menuId: 'nomenu'
|
||||
},
|
||||
replaceLawsNumRow: [], // 代替政策号 数组内容
|
||||
replaceTotal: 0,
|
||||
selectedListRep: [],
|
||||
replaceLoading: true,
|
||||
replacePage: 1
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请输入${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange (event) {
|
||||
// const value = event.target.value
|
||||
const value = event
|
||||
console.log(value)
|
||||
this.$emit('input', value)
|
||||
},
|
||||
selectLaws () {
|
||||
// if (this.standNumFlag === 1) {
|
||||
// this.$refs.selections.selectAll(false)
|
||||
// }
|
||||
// this.sarBussionessLawsEO.replaceLawsNum = ''
|
||||
this.replaceLawsNumModel = true
|
||||
this.getReplaceLawsNumRow()
|
||||
},
|
||||
getReplaceLawsNumRowInfo() {
|
||||
this.replaceLawsNumForm.page = 1
|
||||
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 = ''
|
||||
}
|
||||
this.$http.get('lawss/sarStandardsInfo/getSarStandardsInfoPage', this.replaceLawsNumForm, {
|
||||
_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 (item.standYear != null && item.standYear !== '') {
|
||||
texts = item.standSort !== null ? item.standSort + ' ' + item.standNumber + '-' + item.standYear : item.standNumber + '-' + item.standYear
|
||||
} else {
|
||||
texts = item.standSort !== null ? item.standSort + ' ' + item.standNumber : item.standNumber
|
||||
}
|
||||
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) {
|
||||
console.log('看看看看看看看看item', item)
|
||||
let routeUrl = this.$router.resolve({
|
||||
name: 'OtherBussStandardDetails',
|
||||
params: {
|
||||
id: item.id,
|
||||
pageType: 'BUSINESS_STAND'
|
||||
}
|
||||
})
|
||||
window.open(routeUrl.href, '_blank')
|
||||
},
|
||||
getResetLawsNumRow () {
|
||||
this.replaceLawsNumForm = {
|
||||
standNumber: '', // 政策编号
|
||||
page: 1,
|
||||
pageSize: this.$store.getters.userInfo.configContent,
|
||||
total: 0,
|
||||
standType: 'ALL',
|
||||
quoteIdList: '',
|
||||
validFlag: '0'
|
||||
}
|
||||
this.getReplaceLawsNumRow()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,378 @@
|
||||
<template>
|
||||
<!-- <div>-->
|
||||
<el-col :span="span">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
:label-width="labelWidth"
|
||||
class="add-form-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
>
|
||||
<el-input
|
||||
:value="value"
|
||||
:maxlength="maxlength"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
type="textarea"
|
||||
resize="none"
|
||||
clearable
|
||||
:autosize="true"
|
||||
@input="handleChange"
|
||||
|
||||
></el-input>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="common-button-primary"
|
||||
round
|
||||
style="position:absolute;top: 10px;right: 0;"
|
||||
@click="selectLaws"
|
||||
v-if="(processModel && !disabled) || !processModel"
|
||||
>{{config.attrField === 'releventLaws' ? '选择政策' :'手动查找'}}</el-button>
|
||||
</el-form-item>
|
||||
<el-dialog
|
||||
:title="config.attrName"
|
||||
: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="getReplaceLawsNumRowFirst">
|
||||
<el-form-item label="编号/名称" class="search-item">
|
||||
<el-input v-model="replaceLawsNumForm.numberName" placeholder="根据编号/名称查找" clearable :maxlength="1000"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="search-item btn-box">
|
||||
<el-button
|
||||
icon="el-icon-search"
|
||||
type="primary"
|
||||
class="common-button-primary"
|
||||
round
|
||||
@click="getReplaceLawsNumRowFirst">
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item class="search-item btn-box">
|
||||
<el-button
|
||||
class="common-button-default"
|
||||
icon="el-icon-refresh-left"
|
||||
round
|
||||
type="default"
|
||||
@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
|
||||
label="政策编号"
|
||||
width="130">
|
||||
<template slot-scope="scope">
|
||||
<a class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.lawsNumber }}</a>
|
||||
|
||||
<!--<a v-if="scope.row.standYear" @click="handlePreview(scope.row)">{{ scope.row.standSort }} {{ scope.row.standNumber }}-{{ scope.row.standYear }}</a>-->
|
||||
<!--<a v-else @click="handlePreview(scope.row)">{{ scope.row.standSort }} {{ scope.row.standNumber }}</a>-->
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="lawsName"
|
||||
label="中文名称">
|
||||
<template slot-scope="scope">
|
||||
<a class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.lawsName }}</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="issueTime"
|
||||
label="发布日期"
|
||||
width="130">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
prop="XCXSSRQ"
|
||||
label="新车型实施日期">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.attrInfoMap.XCXSSRQ !== 'N/A' && scope.row.attrInfoMap.XCXSSRQ !== 'TBD'">{{ scope.row.attrInfoMap.XCXSSRQ || '' }}</span>
|
||||
<span v-else>{{ scope.row.attrInfoMap.XCXSSRQ }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="stateName"
|
||||
label="文本状态">
|
||||
</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 round class="common-button-default" icon="el-icon-close" @click="replaceLawsNumModelCancel">取消</el-button>
|
||||
<el-button type="primary" round class="common-button-primary" icon="el-icon-check" @click="replaceLawsNumModelBt">提交</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</el-col>
|
||||
<!-- </div>-->
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CustomInput',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
maxlength: {
|
||||
type: Number,
|
||||
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: {
|
||||
numberName: '', // 政策编号
|
||||
page: 1,
|
||||
pageSize: this.$store.getters.userInfo.configContent,
|
||||
total: 0,
|
||||
lawsType: 'FOREIGN',
|
||||
quoteIdList: '',
|
||||
menuId: ''
|
||||
},
|
||||
replaceLawsNumRow: [], // 代替政策号 数组内容
|
||||
replaceTotal: 0,
|
||||
selectedListRep: [],
|
||||
replaceLoading: true,
|
||||
replacePage: 1,
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请输入${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange (event) {
|
||||
// const value = event.target.value
|
||||
const value = event
|
||||
console.log(value)
|
||||
this.$emit('input', value)
|
||||
if (value.length==1000){
|
||||
return this.$message({
|
||||
message: '相关政策不能输入超过1000个字符',
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
},
|
||||
selectLaws () {
|
||||
// if (this.standNumFlag === 1) {
|
||||
// this.$refs.selections.selectAll(false)
|
||||
// }
|
||||
// this.sarBussionessLawsEO.replaceLawsNum = ''
|
||||
this.replaceLawsNumModel = true
|
||||
this.getReplaceLawsNumRow()
|
||||
},
|
||||
// 代替政策号 请求数据
|
||||
getReplaceLawsNumRowFirst () {
|
||||
if (this.sarBussionessLawsEO.replaceLawsNum !== null && this.sarBussionessLawsEO.replaceLawsNum !== '') {
|
||||
this.replaceLawsNumForm.quoteIdList = this.quoteIdList1.toString() === '' ? '' : this.quoteIdList1
|
||||
} else {
|
||||
this.quoteIdList1 = []
|
||||
this.replaceLawsNumForm.quoteIdList = ''
|
||||
}
|
||||
this.replaceLawsNumForm.page = 1
|
||||
this.replacePage = 1
|
||||
this.$http.get('lawss/sarLawsInfo/page', this.replaceLawsNumForm, {
|
||||
_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 => {
|
||||
})
|
||||
},
|
||||
// 代替政策号 请求数据
|
||||
getReplaceLawsNumRow () {
|
||||
if (this.sarBussionessLawsEO.replaceLawsNum !== null && this.sarBussionessLawsEO.replaceLawsNum !== '') {
|
||||
this.replaceLawsNumForm.quoteIdList = this.quoteIdList1.toString() === '' ? '' : this.quoteIdList1
|
||||
} else {
|
||||
this.quoteIdList1 = []
|
||||
this.replaceLawsNumForm.quoteIdList = ''
|
||||
}
|
||||
this.$http.get('lawss/sarLawsInfo/page', this.replaceLawsNumForm, {
|
||||
_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.replaceLawsNumForm.numberName = ''
|
||||
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 = item.lawsNumber
|
||||
// if (item.standYear != null && item.standYear !== '') {
|
||||
// texts = item.standSort !== null ? item.standSort + ' ' + item.standNumber + '-' + item.standYear : item.standNumber + '-' + item.standYear
|
||||
// } else {
|
||||
// texts = item.standSort !== null ? item.standSort + ' ' + item.standNumber : item.standNumber
|
||||
// }
|
||||
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) {
|
||||
if (this.$hasPermission('A2HDHMEA6W')) {
|
||||
let routeUrl = this.$router.resolve({
|
||||
name: 'OtherLawsDetails',
|
||||
params: {
|
||||
id: item.id,
|
||||
pageType: 'FOREIGN_LAWS'
|
||||
}
|
||||
})
|
||||
window.open(routeUrl.href, '_blank')
|
||||
} else {
|
||||
this.$message.warning('无权访问')
|
||||
}
|
||||
},
|
||||
getResetLawsNumRow() {
|
||||
this.replaceLawsNumForm = {
|
||||
numberName: '', // 政策编号
|
||||
page: 1,
|
||||
pageSize: this.$store.getters.userInfo.configContent,
|
||||
total: 0,
|
||||
lawsType: 'FOREIGN',
|
||||
quoteIdList: '',
|
||||
menuId: ''
|
||||
// validFlag: '0'
|
||||
}
|
||||
this.getReplaceLawsNumRow()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.add-form-item{
|
||||
/deep/.el-form-item__content{
|
||||
.el-textarea{
|
||||
width: calc(~'100% - 90px');
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,398 @@
|
||||
<template>
|
||||
<!-- <div>-->
|
||||
<el-col :span="span">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:label-width="labelWidth"
|
||||
class="add-form-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
>
|
||||
<el-input
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
clearable
|
||||
type="textarea"
|
||||
resize="none"
|
||||
:autosize="true"
|
||||
@input="handleChange"
|
||||
></el-input>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="common-button-primary"
|
||||
round
|
||||
style="position:absolute;top: 10px;right: 0;"
|
||||
@click="selectLaws"
|
||||
v-if="(processModel && !disabled) || !processModel"
|
||||
>{{config.attrField === 'releventStand' ? '选择标准' :'手动查找'}}</el-button>
|
||||
</el-form-item>
|
||||
<el-dialog
|
||||
:title="config.attrName"
|
||||
: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 :model="replaceLawsNumForm" :inline="true" class="label-input-form" @keyup.enter.native="getReplaceLawsNumRowFirst">
|
||||
<el-form-item label="编号/名称" class="search-item">
|
||||
<el-input
|
||||
v-model="numberName"
|
||||
placeholder="根据编号/名称查找"
|
||||
clearable
|
||||
:maxlength="100"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="标准来源" class="search-item" v-if="dataSource">
|
||||
<el-select
|
||||
v-model="replaceLawsNumForm.standType"
|
||||
placeholder="请选择标准来源">
|
||||
<el-option value="INLAND" label="国内标准库"></el-option>
|
||||
<el-option value="FOREIGN" label="国外标准库"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="search-item btn-box">
|
||||
<el-button
|
||||
icon="el-icon-search"
|
||||
type="primary"
|
||||
class="common-button-primary"
|
||||
round
|
||||
@click="getReplaceLawsNumRowFirst">
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item class="search-item btn-box">
|
||||
<el-button
|
||||
class="common-button-default"
|
||||
icon="el-icon-refresh-left"
|
||||
round
|
||||
type="default"
|
||||
@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
|
||||
label="标准编号">
|
||||
<template slot-scope="scope">
|
||||
<a v-if="scope.row.standYear" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.standSort }} {{ scope.row.standCode }}-{{ scope.row.standYear }}</a>
|
||||
<a v-else class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.standSort }} {{ scope.row.standCode }}</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="standName"
|
||||
label="标准名称">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="issueTime"
|
||||
label="发布日期"
|
||||
width="130">
|
||||
<template slot-scope="scope">{{ ['已发布', 'TBD', ''].includes(scope.row.issueTime) ? scope.row.issueTime : $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 round class="common-button-default" 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>
|
||||
|
||||
</el-col>
|
||||
<!-- </div>-->
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CustomInput',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
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'
|
||||
},
|
||||
// 是否支持数据源切换
|
||||
dataSource: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
replaceLawsNumModel: false,
|
||||
sarBussionessLawsEO: {
|
||||
replaceLawsNum: ''
|
||||
},
|
||||
// 代替标准号
|
||||
replaceLawsNumForm: {
|
||||
page: 1,
|
||||
pageSize: this.$store.getters.userInfo.configContent,
|
||||
total: 0,
|
||||
standType: 'ALL',
|
||||
quoteIdList: '',
|
||||
validFlag: '0',
|
||||
menuId: 'nomenu'
|
||||
},
|
||||
numberName: '', // 标准编号
|
||||
replaceLawsNumRow: [], // 代替政策号 数组内容
|
||||
replaceTotal: 0,
|
||||
selectedListRep: [],
|
||||
replaceLoading: true,
|
||||
replacePage: 1
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请输入${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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()
|
||||
},
|
||||
// 代替政策号 请求数据
|
||||
getReplaceLawsNumRowFirst () {
|
||||
let advanceSearchVOStr = [
|
||||
{
|
||||
connect:'',
|
||||
field:'STAND_CODE',
|
||||
type:'like',
|
||||
value: this.numberName
|
||||
},
|
||||
{
|
||||
connect:'OR',
|
||||
field:'STAND_NAME',
|
||||
type:'like',
|
||||
value: this.numberName
|
||||
},
|
||||
]
|
||||
this.replaceLawsNumForm.advanceSearchVOStr = JSON.stringify(advanceSearchVOStr)
|
||||
if (this.sarBussionessLawsEO.replaceLawsNum !== null && this.sarBussionessLawsEO.replaceLawsNum !== '') {
|
||||
this.replaceLawsNumForm.quoteIdList = this.quoteIdList1.toString() === '' ? '' : this.quoteIdList1
|
||||
} else {
|
||||
this.quoteIdList1 = []
|
||||
this.replaceLawsNumForm.quoteIdList = ''
|
||||
}
|
||||
this.replaceLawsNumForm.page = 1
|
||||
this.replacePage = 1
|
||||
this.$http.get('lawss/sarBussRecords/page', this.replaceLawsNumForm, {
|
||||
_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 => {
|
||||
})
|
||||
},
|
||||
// 代替政策号 请求数据
|
||||
getReplaceLawsNumRow () {
|
||||
if (this.sarBussionessLawsEO.replaceLawsNum !== null && this.sarBussionessLawsEO.replaceLawsNum !== '') {
|
||||
this.replaceLawsNumForm.quoteIdList = this.quoteIdList1.toString() === '' ? '' : this.quoteIdList1
|
||||
} else {
|
||||
this.quoteIdList1 = []
|
||||
this.replaceLawsNumForm.quoteIdList = ''
|
||||
}
|
||||
// this.replaceLawsNumForm.standType = this.config.attrField === 'CBBH' ? 'FOREIGN' : 'INLAND'
|
||||
this.$http.get('lawss/sarBussRecords/page', this.replaceLawsNumForm, {
|
||||
_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 (item.standYear != null && item.standYear !== '') {
|
||||
texts = item.standSort !== null ? item.standSort + ' ' + item.standCode + '-' + item.standYear : item.standCode + '-' + item.standYear
|
||||
} else {
|
||||
texts = item.standSort !== null ? item.standSort + ' ' + item.standCode : item.standCode
|
||||
}
|
||||
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 standNum = ''
|
||||
// if (item.standYear){
|
||||
// standNum = item.standSort + ' ' + item.standCode + '-' + item.standYear
|
||||
// } else {
|
||||
// standNum = item.standSort + ' ' + item.standCode
|
||||
// }
|
||||
// // 验证标准号在系统中是否存在
|
||||
// this.$http.get('lawss/sarBussionessStand/queryReplaceStandInfo', {
|
||||
// standNum: item.standCode
|
||||
// }, {
|
||||
// _this: this
|
||||
// }, res => {
|
||||
// if (res.data != null) {
|
||||
// let routeUrl = this.$router.resolve({
|
||||
// name: 'OtherStandardDetails',
|
||||
// params: {
|
||||
// id: res.data.id,
|
||||
// pageType: 'BUSINESS_STAND'
|
||||
// }
|
||||
// })
|
||||
// window.open(routeUrl.href, '_blank')
|
||||
// }else{
|
||||
// this.$message.error('标准号已不存在!')
|
||||
// }
|
||||
// })
|
||||
this.$emit('checkDetail', item)
|
||||
},
|
||||
getResetLawsNumRow () {
|
||||
this.replacePage = 1
|
||||
this.replaceLawsNumForm = {
|
||||
standNumber: '', // 标准编号
|
||||
page: 1,
|
||||
pageSize: this.$store.getters.userInfo.configContent,
|
||||
total: 0,
|
||||
standType: 'INLAND',
|
||||
quoteIdList: '',
|
||||
validFlag: '0'
|
||||
}
|
||||
this.getReplaceLawsNumRow()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.add-form-item{
|
||||
/deep/.el-form-item__content{
|
||||
.el-textarea{
|
||||
width: calc(~'100% - 90px');
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,378 @@
|
||||
<template>
|
||||
<!-- <div>-->
|
||||
<el-col :span="span">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
:label-width="labelWidth"
|
||||
class="add-form-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
>
|
||||
<el-input
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:maxlength="maxlength"
|
||||
clearable
|
||||
type="textarea"
|
||||
resize="none"
|
||||
:autosize="true"
|
||||
@input="handleChange"
|
||||
></el-input>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="common-button-primary"
|
||||
round
|
||||
style="position:absolute;top: 10px;right: 0;"
|
||||
@click="selectLaws"
|
||||
v-if="(processModel && !disabled) || !processModel"
|
||||
>{{config.attrField === 'releventStand' ? '选择标准' :'手动查找'}}</el-button>
|
||||
</el-form-item>
|
||||
<el-dialog
|
||||
:title="config.attrName"
|
||||
: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="getReplaceLawsNumRowFirst">
|
||||
<el-form-item label="标准来源" class="search-item" v-if="dataSource">
|
||||
<el-select
|
||||
v-model="replaceLawsNumForm.standType"
|
||||
placeholder="请选择标准来源"
|
||||
@change="dataSourceChange">
|
||||
<el-option value="INLAND" label="国内标准库"></el-option>
|
||||
<el-option value="FOREIGN" label="国外标准库"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="编号/名称" class="search-item">
|
||||
<el-input
|
||||
v-model="replaceLawsNumForm.standNumber"
|
||||
placeholder="根据编号/名称查找"
|
||||
clearable
|
||||
:maxlength="100"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="search-item btn-box">
|
||||
<el-button
|
||||
icon="el-icon-search"
|
||||
type="primary"
|
||||
class="common-button-primary"
|
||||
round
|
||||
@click="getReplaceLawsNumRowFirst">
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item class="search-item btn-box">
|
||||
<el-button
|
||||
class="common-button-default"
|
||||
icon="el-icon-refresh-left"
|
||||
round
|
||||
type="default"
|
||||
@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
|
||||
label="标准编号">
|
||||
<template slot-scope="scope">
|
||||
<a v-if="scope.row.standYear" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.standSort }} {{ scope.row.standNumber }}-{{ scope.row.standYear }}</a>
|
||||
<a v-else class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.standSort }} {{ scope.row.standNumber }}</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="standName"
|
||||
label="标准名称">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="issueTime"
|
||||
label="发布日期"
|
||||
width="130">
|
||||
<template slot-scope="scope">{{ scope.row.issueTime ? $moment(scope.row.issueTime).format('YYYY-MM-DD') : '' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="standStateShow"
|
||||
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 round class="common-button-default" 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>
|
||||
|
||||
</el-col>
|
||||
<!-- </div>-->
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CustomInput',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
maxlength:{
|
||||
type:Number,
|
||||
required:true
|
||||
},
|
||||
// 栅格比例
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24
|
||||
},
|
||||
// 是否为流程中使用
|
||||
processModel: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// label宽度
|
||||
labelWidth: {
|
||||
type: String,
|
||||
default: '150px'
|
||||
},
|
||||
// 是否支持数据源切换
|
||||
dataSource: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
replaceLawsNumModel: false,
|
||||
sarBussionessLawsEO: {
|
||||
replaceLawsNum: ''
|
||||
},
|
||||
// 代替标准号
|
||||
replaceLawsNumForm: {
|
||||
dataSource: '',
|
||||
standNumber: '', // 标准编号
|
||||
page: 1,
|
||||
pageSize: this.$store.getters.userInfo.configContent,
|
||||
total: 0,
|
||||
standType: 'INLAND',
|
||||
quoteIdList: '',
|
||||
validFlag: '0',
|
||||
menuId: 'nomenu'
|
||||
},
|
||||
replaceLawsNumRow: [], // 代替政策号 数组内容
|
||||
replaceTotal: 0,
|
||||
selectedListRep: [],
|
||||
replaceLoading: true,
|
||||
replacePage: 1
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请输入${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
dataSourceChange (val) {
|
||||
console.log(val)
|
||||
},
|
||||
handleChange (event) {
|
||||
// const value = event.target.value
|
||||
const value = event
|
||||
this.$emit('input', value)
|
||||
if (value.length==1000){
|
||||
return this.$message({
|
||||
message: '相关标准不能输入超过1000个字符',
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
},
|
||||
selectLaws () {
|
||||
this.replaceLawsNumModel = true
|
||||
this.replaceLawsNumForm.standNumber = ''
|
||||
this.getReplaceLawsNumRow()
|
||||
},
|
||||
// 代替政策号 请求数据
|
||||
getReplaceLawsNumRowFirst () {
|
||||
if (this.sarBussionessLawsEO.replaceLawsNum !== null && this.sarBussionessLawsEO.replaceLawsNum !== '') {
|
||||
this.replaceLawsNumForm.quoteIdList = this.quoteIdList1.toString() === '' ? '' : this.quoteIdList1
|
||||
} else {
|
||||
this.quoteIdList1 = []
|
||||
this.replaceLawsNumForm.quoteIdList = ''
|
||||
}
|
||||
this.replaceLawsNumForm.page = 1
|
||||
this.replacePage = 1
|
||||
this.$http.get('lawss/sarStandardsInfo/getSarStandardsInfoPage', this.replaceLawsNumForm, {
|
||||
_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 => {
|
||||
})
|
||||
},
|
||||
// 代替政策号 请求数据
|
||||
getReplaceLawsNumRow () {
|
||||
if (this.sarBussionessLawsEO.replaceLawsNum !== null && this.sarBussionessLawsEO.replaceLawsNum !== '') {
|
||||
this.replaceLawsNumForm.quoteIdList = this.quoteIdList1.toString() === '' ? '' : this.quoteIdList1
|
||||
} else {
|
||||
this.quoteIdList1 = []
|
||||
this.replaceLawsNumForm.quoteIdList = ''
|
||||
}
|
||||
this.replaceLawsNumForm.standType = this.config.attrField === 'CBBH' ? 'FOREIGN' : 'INLAND'
|
||||
this.$http.get('lawss/sarStandardsInfo/getSarStandardsInfoPage', this.replaceLawsNumForm, {
|
||||
_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 (item.standYear != null && item.standYear !== '') {
|
||||
texts = item.standSort !== null ? item.standSort + ' ' + item.standNumber + '-' + item.standYear : item.standNumber + '-' + item.standYear
|
||||
} else {
|
||||
texts = item.standSort !== null ? item.standSort + ' ' + item.standNumber : item.standNumber
|
||||
}
|
||||
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 routeUrl = this.$router.resolve({
|
||||
name: 'OtherStandardDetails',
|
||||
params: {
|
||||
id: item.id,
|
||||
pageType: 'INLAND_STAND'
|
||||
}
|
||||
})
|
||||
window.open(routeUrl.href, '_blank')
|
||||
},
|
||||
getResetLawsNumRow () {
|
||||
this.replaceLawsNumForm = {
|
||||
standNumber: '', // 标准编号
|
||||
page: 1,
|
||||
pageSize: this.$store.getters.userInfo.configContent,
|
||||
total: 0,
|
||||
standType: 'INLAND',
|
||||
quoteIdList: '',
|
||||
validFlag: '0'
|
||||
}
|
||||
this.getReplaceLawsNumRow()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.add-form-item{
|
||||
/deep/.el-form-item__content{
|
||||
.el-textarea{
|
||||
width: calc(~'100% - 90px');
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,379 @@
|
||||
<template>
|
||||
<!-- <div>-->
|
||||
<el-col :span="span">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:label-width="labelWidth"
|
||||
class="add-form-item"
|
||||
:prop="config.attrField"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
>
|
||||
<el-input
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
clearable
|
||||
type="textarea"
|
||||
resize="none"
|
||||
:autosize="true"
|
||||
@input="handleChange"
|
||||
></el-input>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="common-button-primary"
|
||||
round
|
||||
style="position:absolute;top: 10px;right: 0;"
|
||||
@click="selectLaws"
|
||||
v-if="(processModel && !disabled) || !processModel"
|
||||
>{{config.attrField === 'releventStand' ? '选择标准' :'手动查找'}}</el-button>
|
||||
</el-form-item>
|
||||
<el-dialog
|
||||
:title="config.attrName"
|
||||
: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="getReplaceLawsNumRowFirst">
|
||||
<el-form-item label="编号/名称" class="search-item">
|
||||
<el-input
|
||||
v-model="replaceLawsNumForm.standNumber"
|
||||
placeholder="根据编号/名称查找"
|
||||
clearable
|
||||
:maxlength="100"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="标准来源" class="search-item" v-if="dataSource">
|
||||
<el-select
|
||||
v-model="replaceLawsNumForm.standType"
|
||||
placeholder="请选择标准来源">
|
||||
<el-option value="INLAND" label="国内标准库"></el-option>
|
||||
<el-option value="FOREIGN" label="国外标准库"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="search-item btn-box">
|
||||
<el-button
|
||||
icon="el-icon-search"
|
||||
type="primary"
|
||||
class="common-button-primary"
|
||||
round
|
||||
@click="getReplaceLawsNumRowFirst">
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item class="search-item btn-box">
|
||||
<el-button
|
||||
class="common-button-default"
|
||||
icon="el-icon-refresh-left"
|
||||
round
|
||||
type="default"
|
||||
@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
|
||||
label="标准编号">
|
||||
<template slot-scope="scope">
|
||||
<a v-if="scope.row.standYear" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.standSortShow }} {{ scope.row.standNumber }}-{{ scope.row.standYear }}</a>
|
||||
<a v-else class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.standSortShow }} {{ scope.row.standNumber }}</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="standName"
|
||||
label="标准名称">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="issueTime"
|
||||
label="发布日期"
|
||||
width="130">
|
||||
<template slot-scope="scope">{{ ['已发布', 'TBD', ''].includes(scope.row.issueTime) ? scope.row.issueTime : $moment(scope.row.issueTime).format('YYYY-MM-DD') }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="standStateShow"
|
||||
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 round class="common-button-default" 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>
|
||||
|
||||
</el-col>
|
||||
<!-- </div>-->
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CustomInput',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
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'
|
||||
},
|
||||
// 是否支持数据源切换
|
||||
dataSource: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
replaceLawsNumModel: false,
|
||||
sarBussionessLawsEO: {
|
||||
replaceLawsNum: ''
|
||||
},
|
||||
// 代替标准号
|
||||
replaceLawsNumForm: {
|
||||
standNumber: '', // 标准编号
|
||||
page: 1,
|
||||
pageSize: this.$store.getters.userInfo.configContent,
|
||||
total: 0,
|
||||
standType: 'ALL',
|
||||
quoteIdList: '',
|
||||
validFlag: '0',
|
||||
menuId: 'nomenu'
|
||||
},
|
||||
replaceLawsNumRow: [], // 代替政策号 数组内容
|
||||
replaceTotal: 0,
|
||||
selectedListRep: [],
|
||||
replaceLoading: true,
|
||||
replacePage: 1
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请输入${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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()
|
||||
},
|
||||
// 代替政策号 请求数据
|
||||
getReplaceLawsNumRowFirst () {
|
||||
if (this.sarBussionessLawsEO.replaceLawsNum !== null && this.sarBussionessLawsEO.replaceLawsNum !== '') {
|
||||
this.replaceLawsNumForm.quoteIdList = this.quoteIdList1.toString() === '' ? '' : this.quoteIdList1
|
||||
} else {
|
||||
this.quoteIdList1 = []
|
||||
this.replaceLawsNumForm.quoteIdList = ''
|
||||
}
|
||||
this.replaceLawsNumForm.page = 1
|
||||
this.replacePage = 1
|
||||
this.$http.get('lawss/sarStandardsInfo/getSarStandardsInfoPage', this.replaceLawsNumForm, {
|
||||
_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 => {
|
||||
})
|
||||
},
|
||||
// 代替政策号 请求数据
|
||||
getReplaceLawsNumRow () {
|
||||
if (this.sarBussionessLawsEO.replaceLawsNum !== null && this.sarBussionessLawsEO.replaceLawsNum !== '') {
|
||||
this.replaceLawsNumForm.quoteIdList = this.quoteIdList1.toString() === '' ? '' : this.quoteIdList1
|
||||
} else {
|
||||
this.quoteIdList1 = []
|
||||
this.replaceLawsNumForm.quoteIdList = ''
|
||||
}
|
||||
// this.replaceLawsNumForm.standType = this.config.attrField === 'CBBH' ? 'FOREIGN' : 'INLAND'
|
||||
this.$http.get('lawss/sarStandardsInfo/getSarStandardsInfoPage', this.replaceLawsNumForm, {
|
||||
_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: `${this.config.attrName}最多选择20项`,
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
this.selectedListRep.map((item) => {
|
||||
let texts = ''
|
||||
if (item.standYear != null && item.standYear !== '') {
|
||||
texts = item.standSortShow !== null ? item.standSortShow + ' ' + item.standNumber + '-' + item.standYear : item.standNumber + '-' + item.standYear
|
||||
} else {
|
||||
texts = item.standSortShow !== null ? item.standSortShow + ' ' + item.standNumber : item.standNumber
|
||||
}
|
||||
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 standNum = ''
|
||||
if (item.standYear){
|
||||
standNum = item.standSort + ' ' + item.standNumber + '-' + item.standYear
|
||||
} else {
|
||||
standNum = item.standSort + ' ' + item.standNumber
|
||||
}
|
||||
// 验证标准号在系统中是否存在
|
||||
this.$http.post('lawss/sarTestItem/validateStandNumber', {
|
||||
standnumber: standNum
|
||||
}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
let routeUrl = this.$router.resolve({
|
||||
name: 'OtherStandardDetails',
|
||||
params: {
|
||||
id: item.id,
|
||||
pageType: 'INLAND_STAND'
|
||||
}
|
||||
})
|
||||
window.open(routeUrl.href, '_blank')
|
||||
})
|
||||
},
|
||||
getResetLawsNumRow () {
|
||||
this.replacePage = 1
|
||||
this.replaceLawsNumForm = {
|
||||
standNumber: '', // 标准编号
|
||||
page: 1,
|
||||
pageSize: this.$store.getters.userInfo.configContent,
|
||||
total: 0,
|
||||
standType: 'INLAND',
|
||||
quoteIdList: '',
|
||||
validFlag: '0'
|
||||
}
|
||||
this.getReplaceLawsNumRow()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.add-form-item{
|
||||
/deep/.el-form-item__content{
|
||||
.el-textarea{
|
||||
width: calc(~'100% - 90px');
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,398 @@
|
||||
<template>
|
||||
<!-- <div>-->
|
||||
<el-col :span="span">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
:label-width="labelWidth"
|
||||
class="add-form-item leftButton"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
>
|
||||
<el-input
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
clearable
|
||||
@input="handleChange"
|
||||
></el-input>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="common-button-primary"
|
||||
round
|
||||
style="position:absolute;top: 10px;right: 0;"
|
||||
@click="selectLaws"
|
||||
v-if="(processModel && !disabled) || !processModel"
|
||||
>手动查找</el-button>
|
||||
</el-form-item>
|
||||
<el-dialog
|
||||
:title="config.attrName"
|
||||
: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.numberName"
|
||||
placeholder="根据企标编号/标准名称查找"
|
||||
clearable
|
||||
:maxlength="100"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="search-item btn-box">
|
||||
<el-button
|
||||
icon="el-icon-search"
|
||||
type="primary"
|
||||
class="common-button-primary"
|
||||
round
|
||||
@click="getReplaceLawsNumRowSearch">
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item class="search-item btn-box">
|
||||
<el-button
|
||||
class="common-button-default"
|
||||
icon="el-icon-refresh-left"
|
||||
round
|
||||
type="default"
|
||||
@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 v-if="dataSource === 'BUSINESS'">
|
||||
<a v-if="scope.row.standYear" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.standCode }}-{{ scope.row.standYear }}</a>
|
||||
<a v-else class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.standCode }}</a>
|
||||
</span>
|
||||
<span v-else>
|
||||
<a v-if="scope.row.standYear" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.standSortShow }} {{ scope.row.standNumber }}-{{ scope.row.standYear }}</a>
|
||||
<a v-else @click="handlePreview(scope.row)" class="table-jump">{{ scope.row.standSortShow }} {{ scope.row.standNumber }}</a>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="standName"
|
||||
label="标准名称"
|
||||
min-width="130">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="issueTime"
|
||||
label="发布日期"
|
||||
width="130">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="putTime"
|
||||
label="实施日期"
|
||||
width="130">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="standStateShow"
|
||||
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 round class="common-button-default" 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>
|
||||
|
||||
</el-col>
|
||||
<!-- </div>-->
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CustomInput',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
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', // 数据来源
|
||||
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: '企业标准 '}
|
||||
],
|
||||
dataSource: 'BUSINESS'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请输入${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
}
|
||||
},
|
||||
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
|
||||
}
|
||||
this.dataSource = this.replaceLawsNumForm.dataSource
|
||||
// 根据数据来源，查询不同的标准库
|
||||
formData.standType = this.replaceLawsNumForm.dataSource === 'INLAND_STAND' ? 'INLAND'
|
||||
: this.replaceLawsNumForm.dataSource === 'FOREIGN_STAND' ? 'FOREIGN' : ''
|
||||
formData.standNumber = formData.numberName
|
||||
let url = this.replaceLawsNumForm.dataSource === 'BUSINESS' ? 'lawss/sarBussionessStand/getSarBussionStandPage' : 'lawss/sarStandardsInfo/getSarStandardsInfoPage'
|
||||
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 === 'BUSINESS') {
|
||||
if (item.standYear != null && item.standYear !== '') {
|
||||
texts = item.standCode + '-' + item.standYear
|
||||
} else {
|
||||
texts = item.standCode
|
||||
}
|
||||
} else {
|
||||
if (item.standYear != null && item.standYear !== '') {
|
||||
texts = item.standSortShow + ' ' + item.standNumber + '-' + item.standYear
|
||||
} else {
|
||||
texts = item.standSortShow + ' ' + item.standNumber
|
||||
}
|
||||
}
|
||||
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
|
||||
}
|
||||
let routeUrl = this.$router.resolve({
|
||||
name: name,
|
||||
params: {
|
||||
id: item.id,
|
||||
pageType: pageType
|
||||
}
|
||||
})
|
||||
window.open(routeUrl.href, '_blank')
|
||||
|
||||
},
|
||||
getResetLawsNumRow () {
|
||||
this.replaceLawsNumForm = {
|
||||
dataSource: 'BUSINESS',
|
||||
numberName: '', // 政策编号
|
||||
page: 1,
|
||||
pageSize: this.$store.getters.userInfo.configContent,
|
||||
total: 0,
|
||||
lawsType: 'FOREIGN',
|
||||
quoteIdList: '',
|
||||
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,348 @@
|
||||
<template>
|
||||
<!-- <div>-->
|
||||
<el-col :span="span">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
:label-width="labelWidth"
|
||||
class="add-form-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
>
|
||||
<el-input
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
clearable
|
||||
@input="handleChange"
|
||||
></el-input>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="common-button-primary"
|
||||
round
|
||||
style="position:absolute;top: 10px;right: 0;"
|
||||
@click="selectLaws"
|
||||
v-if="(processModel && !disabled) || !processModel"
|
||||
>手动查找</el-button>
|
||||
</el-form-item>
|
||||
<el-dialog
|
||||
:title="config.attrName"
|
||||
: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="getReplaceLawsNumRow">
|
||||
<el-form-item label="编号/名称" class="search-item">
|
||||
<el-input v-model="replaceLawsNumForm.standNumber" placeholder="根据编号/名称查找" clearable :maxlength="100"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="标准来源" class="search-item" v-if="dataSource">
|
||||
<el-select
|
||||
v-model="replaceLawsNumForm.standType"
|
||||
placeholder="请选择标准来源">
|
||||
<el-option value="ALL" label="全部"></el-option>
|
||||
<el-option value="INLAND" label="国内标准库"></el-option>
|
||||
<el-option value="FOREIGN" label="国外标准库"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="search-item btn-box">
|
||||
<el-button
|
||||
icon="el-icon-search"
|
||||
type="primary"
|
||||
class="common-button-primary"
|
||||
round
|
||||
@click="getReplaceLawsNumRow">
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item class="search-item btn-box">
|
||||
<el-button
|
||||
class="common-button-default"
|
||||
icon="el-icon-refresh-left"
|
||||
round
|
||||
type="default"
|
||||
@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
|
||||
label="标准编号"
|
||||
width="130">
|
||||
<template slot-scope="scope">
|
||||
<a v-if="scope.row.standYear" class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.standSort }} {{ scope.row.standNumber }}-{{ scope.row.standYear }}</a>
|
||||
<a v-else class="table-jump" @click="handlePreview(scope.row)">{{ scope.row.standSort }} {{ scope.row.standNumber }}</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="standName"
|
||||
label="标准名称"
|
||||
width="130">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="issueTime"
|
||||
label="发布日期"
|
||||
width="130">
|
||||
<template slot-scope="scope">{{ scope.row.issueTime || '' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="putTime"
|
||||
label="实施日期"
|
||||
width="130">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="standNatureShow"
|
||||
label="标准性质"
|
||||
width="130">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="standStateShow"
|
||||
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 round class="common-button-default" 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>
|
||||
|
||||
</el-col>
|
||||
<!-- </div>-->
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CustomInput',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
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'
|
||||
},
|
||||
// 数据来源
|
||||
dataSourceFrom: {
|
||||
type: String
|
||||
},
|
||||
// 是否可区分数据来源
|
||||
dataSource: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
replaceLawsNumModel: false,
|
||||
sarBussionessLawsEO: {
|
||||
replaceLawsNum: ''
|
||||
},
|
||||
// 代替标准号
|
||||
replaceLawsNumForm: {
|
||||
standNumber: '', // 政策编号
|
||||
page: 1,
|
||||
pageSize: this.$store.getters.userInfo.configContent,
|
||||
total: 0,
|
||||
standType: 'ALL',
|
||||
quoteIdList: '',
|
||||
validFlag: '0',
|
||||
menuId: 'nomenu'
|
||||
},
|
||||
replaceLawsNumRow: [], // 代替政策号 数组内容
|
||||
replaceTotal: 0,
|
||||
selectedListRep: [],
|
||||
replaceLoading: true,
|
||||
replacePage: 1,
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请输入${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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 = ''
|
||||
}
|
||||
this.$http.get('lawss/sarStandardsInfo/getSarStandardsInfoPage', this.replaceLawsNumForm, {
|
||||
_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 (item.standYear != null && item.standYear !== '') {
|
||||
texts = item.standSort !== null ? item.standSort + ' ' + item.standNumber + '-' + item.standYear : item.standNumber + '-' + item.standYear
|
||||
} else {
|
||||
texts = item.standSort !== null ? item.standSort + ' ' + item.standNumber : item.standNumber
|
||||
}
|
||||
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 routeUrl = this.$router.resolve({
|
||||
name: 'OtherBussStandardDetails',
|
||||
params: {
|
||||
id: item.id,
|
||||
pageType: 'BUSINESS_STAND'
|
||||
}
|
||||
})
|
||||
window.open(routeUrl.href, '_blank')
|
||||
},
|
||||
getResetLawsNumRow() {
|
||||
this.replacePage = 1
|
||||
this.replaceLawsNumForm = {
|
||||
standNumber: '', // 政策编号
|
||||
page: 1,
|
||||
pageSize: this.$store.getters.userInfo.configContent,
|
||||
total: 0,
|
||||
standType: 'FOREIGN',
|
||||
quoteIdList: '',
|
||||
validFlag: '0'
|
||||
}
|
||||
this.getReplaceLawsNumRow()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataSourceFrom: {
|
||||
handler (val) {
|
||||
this.replaceLawsNumForm.standType = val
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,70 @@
|
||||
<!-- 数字输入框 -->
|
||||
<template>
|
||||
<!-- <div>-->
|
||||
<el-col :span="span">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
label-width="150px"
|
||||
class="add-form-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
>
|
||||
<el-input
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
clearable
|
||||
@input="handleChange"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- </div>-->
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CustomInputNumber',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 栅格比例
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请输入${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange (event) {
|
||||
// const value = event.target.value
|
||||
let value = event
|
||||
value = value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')
|
||||
this.$emit('input', value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,405 @@
|
||||
<template>
|
||||
<el-col :span="span">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
:label-width="labelWidth"
|
||||
class="add-form-item expand-form-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
>
|
||||
<el-input
|
||||
v-model="checkedName"
|
||||
:placeholder="'请选择' + config.attrName"
|
||||
readonly
|
||||
:disabled="disabled"
|
||||
:id="config.attrField"
|
||||
@click.native="handleClick"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-drawer
|
||||
:title="config.attrName"
|
||||
:visible.sync="visible"
|
||||
:wrapper-closable="false"
|
||||
size="350px"
|
||||
append-to-body
|
||||
class="org-tree"
|
||||
@opened="drawerOpen"
|
||||
@close="handleTreeDrawerCancel"
|
||||
>
|
||||
<div :class="{'demo-drawer-content': config.attrType === 'SEL_OPTS'}">
|
||||
<template v-if="!isFO">
|
||||
<dept-tree
|
||||
:key="config.attrField"
|
||||
:ref="config.attrField"
|
||||
:all-dept="config.selVal !== 'ORGLIST'"
|
||||
expandAll
|
||||
:show-user="config.selVal === 'USERLIST' || config.selVal === 'ROLELIST'"
|
||||
:check-enable="config.attrType === 'SEL_OPTS'"
|
||||
:deptSelect="config.selVal === 'ORGLIST'"
|
||||
:treeDivId="config.attrField + 'Tree'"
|
||||
:editable="false"
|
||||
:onlyChecked="config.attrType === 'SEL_OPTS'"
|
||||
:chkboxType="{ 'Y': '', 'N': '' }"
|
||||
@treeOnCheck="handleTreeOnCheck"
|
||||
@treeDblClick="handleTreeDblClick">
|
||||
</dept-tree>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<laws-tree
|
||||
v-if="visible"
|
||||
:key="config.attrField"
|
||||
:ref="config.attrField"
|
||||
:zNodes="zNodesRole"
|
||||
expandAll
|
||||
:check-enable="config.attrType === 'SEL_OPTS' || checkEnable"
|
||||
:deptSelect="config.selVal === 'ORGLIST'"
|
||||
:treeDivId="config.attrField + 'Tree'"
|
||||
:editable="false"
|
||||
:onlyChecked="config.attrType === 'SEL_OPTS'"
|
||||
:chkboxType="{ 'Y': '', 'N': '' }"
|
||||
:initNotCheck="initNotCheck"
|
||||
@treeOnCheck="handleTreeOnCheck"
|
||||
@treeDblClick="handleTreeDblClick"></laws-tree>
|
||||
</template>
|
||||
</div>
|
||||
<div class="demo-drawer-footer" v-if="config.attrType === 'SEL_OPTS' || checkEnable">
|
||||
<el-button
|
||||
round
|
||||
class="common-button-primary"
|
||||
icon="el-icon-check"
|
||||
type="primary"
|
||||
@click="handleTreeDrawerConfirm">确定
|
||||
</el-button>
|
||||
<el-button
|
||||
round
|
||||
class="common-button-default"
|
||||
icon="el-icon-close"
|
||||
@click="handleTreeDrawerCancel">取消</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import eventHub from '@/common/eventHub'
|
||||
|
||||
export default {
|
||||
name: 'OrgTree',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 栅格比例
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24
|
||||
},
|
||||
// 是否显示全部部门
|
||||
allDept: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
zNodes: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 原数据对象
|
||||
dataModel: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
labelWidth: {
|
||||
type: String,
|
||||
default: '150px'
|
||||
},
|
||||
// 是否为多选
|
||||
checkEnable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 加载时不执行默认选中
|
||||
initNotCheck: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
treeCheckNode: [],
|
||||
checkedName: '',
|
||||
zNodesRole: [],
|
||||
roleList: [],
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请选择${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
},
|
||||
isString (str) {
|
||||
return (typeof str === 'string') && str.constructor === String
|
||||
},
|
||||
isFO () {
|
||||
return this.config.attrField === 'FO'
|
||||
},
|
||||
ZRBM () {
|
||||
return this.dataModel['ZRBM'] || ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTreeDblClick (treeId, treeNode) {
|
||||
this.checkedName = treeNode.userName || treeNode.oldname || treeNode.name
|
||||
this.$emit('input', treeNode.id)
|
||||
this.$emit('on-checked', this.checkedName)
|
||||
this.$emit('on-dept', treeNode.pOrgId, treeNode.pOrgName)
|
||||
this.visible = false
|
||||
},
|
||||
handleTreeOnCheck (treeCheckNode) {
|
||||
this.treeCheckNode = treeCheckNode
|
||||
},
|
||||
getShowName (id) {
|
||||
let name = ''
|
||||
this.zNodes.map(item => {
|
||||
if (item.id === id) {
|
||||
name = item.oldname || item.name
|
||||
}
|
||||
})
|
||||
return name
|
||||
},
|
||||
handleTreeDrawerConfirm () {
|
||||
if (this.config.selVal === 'USERLIST' || this.config.selVal === 'ROLELIST') {
|
||||
let checkedList = []
|
||||
let checkedNameList = []
|
||||
let deptIdList = []
|
||||
let deptNameList = []
|
||||
this.treeCheckNode.map(item => {
|
||||
if (!item.isParent) {
|
||||
checkedList.push(item.id)
|
||||
checkedNameList.push(item.userName || item.oldname || item.name)
|
||||
deptIdList.push(item.pOrgId)
|
||||
deptNameList.push(item.pOrgName)
|
||||
}
|
||||
})
|
||||
this.checkedName = checkedNameList.join(',')
|
||||
this.$emit('input', checkedList.join(','))
|
||||
this.$emit('on-checked', this.checkedName)
|
||||
this.$emit('on-dept', [...new Set(deptIdList)].join(','), [...new Set(deptNameList)].join(','))
|
||||
} else {
|
||||
const checkedList = []
|
||||
const checkedNameList = []
|
||||
this.treeCheckNode.map(item => {
|
||||
checkedList.push(item.id)
|
||||
if (item.oldname) {
|
||||
checkedNameList.push(item.oldname)
|
||||
} else {
|
||||
checkedNameList.push(item.name)
|
||||
}
|
||||
})
|
||||
this.checkedName = checkedNameList.join(',')
|
||||
this.$emit('input', checkedList.join(','))
|
||||
this.$emit('on-checked', this.checkedName)
|
||||
}
|
||||
this.visible = false
|
||||
},
|
||||
handleTreeDrawerCancel () {
|
||||
this.visible = false
|
||||
this.zNodesRole = []
|
||||
},
|
||||
// 赋值回显人员和部门
|
||||
drawerOpen () {
|
||||
let checkedArr = this.value ? this.value.split(',') : []
|
||||
if (checkedArr.length > 0) {
|
||||
setTimeout(() => {
|
||||
this.$nextTick(() => {
|
||||
this.$refs[this.config.attrField].checkedNode(checkedArr)
|
||||
})
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
handleClick () {
|
||||
if (this.disabled) {
|
||||
return false
|
||||
}
|
||||
if (this.isFO) {
|
||||
if (!this.dataModel.ZRBM || this.dataModel.ZRBM === '') {
|
||||
this.$message.warning('请先选择责任部门')
|
||||
} else {
|
||||
this.visible = true
|
||||
this.getUserByRole(this.dataModel.ZRBM)
|
||||
}
|
||||
} else {
|
||||
this.visible = true
|
||||
}
|
||||
},
|
||||
|
||||
// 获取角色列表
|
||||
selectRoleList () {
|
||||
this.$http.get('sys/role/findAll', {}, {_this: this}, res => {
|
||||
let roleList = res.data
|
||||
let roleOpList = []
|
||||
for (let index = 0; index < roleList.length; index++) {
|
||||
let role = roleList[index]
|
||||
let roleOption = {}
|
||||
roleOption.label = role.name
|
||||
roleOption.value = role.id
|
||||
roleOpList.push(roleOption)
|
||||
}
|
||||
this.roleList = roleOpList
|
||||
}, e => {})
|
||||
},
|
||||
|
||||
// 根据角色名称获取角色id
|
||||
// queryRoleIdByRoleName (roleName) {
|
||||
// let roleId = ''
|
||||
// this.roleList.map(item => {
|
||||
// if (item.label === roleName) {
|
||||
// roleId = item.value
|
||||
// }
|
||||
// })
|
||||
// return roleId
|
||||
// },
|
||||
/**
|
||||
* @author liruohao
|
||||
* @date 2019/4/24
|
||||
* @Description: 获取选中的部门下子子部门
|
||||
*/
|
||||
getDeptChild (orgId) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$http.get('sys/org/getChildDept', {
|
||||
orgId
|
||||
}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
if (res.ok) {
|
||||
// 获取组织与人员完毕，开始组装树结构
|
||||
let zNodes = []
|
||||
let treeNodeList = res.data
|
||||
for (let i = 0; i < treeNodeList.length; i++) {
|
||||
let zObj = {}
|
||||
zObj.id = treeNodeList[i].id
|
||||
zObj.pId = treeNodeList[i].pId
|
||||
// 该节点为机构
|
||||
zObj.name = treeNodeList[i].orgName
|
||||
zObj.icon = 'static/images/dept.png'
|
||||
zObj.isParent = true
|
||||
zObj.shotName = treeNodeList[i].shotName
|
||||
zObj.remarks = treeNodeList[i].remarks
|
||||
zNodes[i] = zObj
|
||||
}
|
||||
resolve(res.data)
|
||||
}
|
||||
}, e => {
|
||||
reject(e)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 查询指定角色的人员组成树结构
|
||||
getUserByRole (orgId) {
|
||||
// this.getDeptChild(orgId).then(treeNodeList => {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.loading = true
|
||||
this.$http.get('sys/org/getTreeByRoleAndOrgId2', {
|
||||
orgId,
|
||||
roleHierarchyName: 'FO'
|
||||
}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
this.loading = false
|
||||
if (res.ok) {
|
||||
// 获取组织与人员完毕，开始组装树结构
|
||||
let treeNodeList = []
|
||||
for (let i in res.data) {
|
||||
let obj = {}
|
||||
for (let key in res.data[i]) {
|
||||
obj[key] = res.data[i][key]
|
||||
}
|
||||
if (!res.data[i].roleName) {
|
||||
obj.icon = 'static/images/dept.png'
|
||||
obj.name = obj.orgName
|
||||
obj.isChecked = true
|
||||
} else {
|
||||
obj.icon = 'static/images/user.png'
|
||||
obj.name = obj.roleName
|
||||
obj.pId = obj.id
|
||||
obj.id = obj.roleId
|
||||
obj.isParent = false
|
||||
}
|
||||
treeNodeList.push(obj)
|
||||
}
|
||||
this.zNodesRole = treeNodeList
|
||||
}
|
||||
resolve()
|
||||
}, e => {
|
||||
this.loading = false
|
||||
reject(e)
|
||||
})
|
||||
})
|
||||
// })
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isFO (val) {
|
||||
if (val) {
|
||||
this.selectRoleList()
|
||||
}
|
||||
},
|
||||
config: {
|
||||
deep: true,
|
||||
handler () {
|
||||
// this.checkedName = this.config.valueName || this.checkedName
|
||||
// if (this.config.valueName!==""){
|
||||
this.checkedName = this.config.valueName || ''
|
||||
// }
|
||||
}
|
||||
},
|
||||
value (newVal, oldVal) {
|
||||
this.checkedName = newVal !== '' ? this.checkedName : ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.checkedName = this.config.valueName || ''
|
||||
if (this.isFO) {
|
||||
this.selectRoleList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.el-drawer__body{
|
||||
& > div:first-child{
|
||||
display: flex;
|
||||
flex: auto;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
::v-deep .el-drawer__header{
|
||||
&>span:first-child{
|
||||
outline: none!important;
|
||||
}
|
||||
}
|
||||
::v-deep .el-drawer{
|
||||
outline: none!important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="handleBtnCLick">点击查看</el-button>
|
||||
|
||||
<el-drawer
|
||||
ref="drawer"
|
||||
title="项目相关成员"
|
||||
:visible.sync="drawerVisible"
|
||||
:wrapperClosable="false"
|
||||
size="600px"
|
||||
:destroy-on-close="true"
|
||||
append-to-body
|
||||
>
|
||||
<div class="demo-drawer-content">
|
||||
<project-related-personnel-tree
|
||||
:value="valueCopy"
|
||||
@input="handleValueUpdate"
|
||||
></project-related-personnel-tree>
|
||||
</div>
|
||||
<div class="demo-drawer-footer">
|
||||
<el-button round class="common-button-primary" icon="el-icon-check" type="primary" @click="confirmDrawer('drawer')">确定</el-button>
|
||||
<el-button round class="common-button-default" icon="el-icon-close" @click="closeDrawer('drawer')">取消</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProjectRelatedPersonnelTree from '../ProjectRelatedPersonnel/index2'
|
||||
|
||||
export default {
|
||||
name: 'ProjectRelatedPersonnel',
|
||||
components: {
|
||||
ProjectRelatedPersonnelTree
|
||||
},
|
||||
props: ['value'],
|
||||
data() {
|
||||
return {
|
||||
drawerVisible: false,
|
||||
valueCopy: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(newValue, oldValue) {
|
||||
this.valueCopy = newValue
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeDrawer(name) {
|
||||
this.$refs[name].closeDrawer()
|
||||
},
|
||||
|
||||
confirmDrawer(name) {
|
||||
this.$emit('input', this.valueCopy)
|
||||
this.closeDrawer(name)
|
||||
},
|
||||
|
||||
handleValueUpdate(value) {
|
||||
this.valueCopy = value
|
||||
},
|
||||
|
||||
handleBtnCLick() {
|
||||
this.valueCopy = this.value
|
||||
this.drawerVisible = true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.valueCopy = this.value
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.demo-drawer-content{
|
||||
overflow-y: hidden;
|
||||
}
|
||||
::v-deep .el-drawer__header{
|
||||
&>span:first-child{
|
||||
outline: none!important;
|
||||
}
|
||||
}
|
||||
::v-deep .el-drawer{
|
||||
outline: none!important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,179 @@
|
||||
<!--SVPPS组件-->
|
||||
<template>
|
||||
<el-col :span="span">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
:label-width="labelWidth"
|
||||
class="add-form-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
>
|
||||
<el-input
|
||||
v-model="checkedName"
|
||||
:placeholder="'请选择' + config.attrName"
|
||||
readonly
|
||||
:disabled="disabled"
|
||||
:id="config.attrField"
|
||||
@click.native="handleSVPPSClick"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-drawer
|
||||
:title="config.attrName"
|
||||
:visible.sync="visible"
|
||||
:wrapper-closable="false"
|
||||
size="350px"
|
||||
append-to-body
|
||||
class="org-tree"
|
||||
@opened="drawerOpen"
|
||||
>
|
||||
<div class="demo-drawer-content">
|
||||
<laws-tree
|
||||
v-if="visible"
|
||||
:zNodes="zNodes"
|
||||
check-enable
|
||||
treeDivId="SVPPSID"
|
||||
@treeOnCheck="handleOnCheck"
|
||||
:editable="false"
|
||||
:checkIdList="checkIdList"
|
||||
:chkboxType="{ 'Y': '', 'N': '' }"
|
||||
ref="SVPPSID"
|
||||
:loading="svppsLoading"
|
||||
class="ztree" style="height: 100%;overflow: auto"
|
||||
/>
|
||||
</div>
|
||||
<div class="demo-drawer-footer">
|
||||
<el-button
|
||||
round
|
||||
class="common-button-primary"
|
||||
icon="el-icon-check"
|
||||
type="primary"
|
||||
@click="handleTreeDrawerConfirm">确定
|
||||
</el-button>
|
||||
<el-button
|
||||
round
|
||||
class="common-button-default"
|
||||
icon="el-icon-close"
|
||||
@click="handleTreeDrawerCancel">取消</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</el-col>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'SVPPS',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 栅格比例
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24
|
||||
},
|
||||
labelWidth: {
|
||||
type: String,
|
||||
default: '150px'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
treeCheckNode: [],
|
||||
checkedName: '',
|
||||
zNodes: [],
|
||||
svppsLoading: false,
|
||||
checkIdList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getSvpps () {
|
||||
this.svppsLoading = true
|
||||
this.$http.get('/lawss/otSvpps/selectThree', {}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
this.svppsLoading = false
|
||||
if (res.ok) {
|
||||
let treeNode = []
|
||||
res.data.map((item, index) => {
|
||||
let treeItem = {
|
||||
name: item.svppsCode + ' ' + item.svppsCnName + ' ' + item.svppsEnName,
|
||||
pId: item.pid,
|
||||
id: item.id,
|
||||
svppsCode: item.svppsCode,
|
||||
snum: item.snum,
|
||||
fnum: item.fnum,
|
||||
tnum: item.tnum
|
||||
}
|
||||
treeNode[index] = treeItem
|
||||
})
|
||||
this.zNodes = treeNode
|
||||
}
|
||||
})
|
||||
},
|
||||
// 选择SVPPS事件
|
||||
handleOnCheck (treeCheckNode) {
|
||||
this.treeCheckNode = treeCheckNode
|
||||
},
|
||||
// 选择SVPPS确定事件
|
||||
handleTreeDrawerConfirm () {
|
||||
const checkedList = []
|
||||
const checkedNameList = []
|
||||
if (this.treeCheckNode.length > 0) {
|
||||
this.treeCheckNode.map(item => {
|
||||
// if (item.pId) {
|
||||
checkedList.push(item.id)
|
||||
checkedNameList.push(item.svppsCode)
|
||||
// }
|
||||
})
|
||||
this.checkedName = checkedNameList.join(',')
|
||||
this.$emit('input', checkedList.join(','))
|
||||
this.$emit('SVPPSName', this.checkedName)
|
||||
this.$emit('on-checked', this.checkedName)
|
||||
}
|
||||
this.visible = false
|
||||
},
|
||||
// 选择SVPPS取消事件
|
||||
handleTreeDrawerCancel () {
|
||||
this.visible = false
|
||||
},
|
||||
// 赋值回显SVPPS
|
||||
drawerOpen () {
|
||||
this.checkIdList = this.value ? this.value.split(',') : []
|
||||
},
|
||||
handleSVPPSClick () {
|
||||
if (this.disabled) {
|
||||
return false
|
||||
}
|
||||
this.visible = true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'config.valueName' () {
|
||||
this.checkedName = this.config.valueName || ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getSvpps()
|
||||
this.checkedName = this.config.valueName || ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
||||
::v-deep .el-drawer__header{
|
||||
&>span:first-child{
|
||||
outline: none!important;
|
||||
}
|
||||
}
|
||||
::v-deep .el-drawer{
|
||||
outline: none!important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,221 @@
|
||||
<!-- 可搜索多选框 -->
|
||||
<template>
|
||||
<!-- <div>-->
|
||||
<el-col :span="span">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
label-width="150px"
|
||||
class="add-form-item"
|
||||
>
|
||||
<el-dropdown
|
||||
trigger="click"
|
||||
class="search-select"
|
||||
size="medium"
|
||||
>
|
||||
<el-input
|
||||
type="text"
|
||||
readonly
|
||||
:placeholder="placeholder"
|
||||
v-model="selectedLabel"
|
||||
suffix-icon="el-icon-arrow-down"
|
||||
@click.native="visibleToggle"
|
||||
:class="{ 'search-visible': visible }"
|
||||
></el-input>
|
||||
<el-input
|
||||
type="hidden"
|
||||
v-model="selectedValue"
|
||||
class="el-input-hidden"
|
||||
></el-input>
|
||||
<el-dropdown-menu
|
||||
slot="dropdown"
|
||||
class="search-select-el-dropdown-menu"
|
||||
>
|
||||
<div class="search-input">
|
||||
<el-input
|
||||
v-model="searchKey"
|
||||
placeholder="要搜索的内容"
|
||||
class="input-color"
|
||||
clearable />
|
||||
</div>
|
||||
<div class="search-options">
|
||||
<el-dropdown-item
|
||||
v-for="option in filterOptions"
|
||||
:name="option.value || option.id"
|
||||
:title="option.label || option.name"
|
||||
:key="option.value"
|
||||
:disabled="disabled"
|
||||
@click.native="ondropClick(option)"
|
||||
>
|
||||
{{ option.label || option.name }}
|
||||
</el-dropdown-item>
|
||||
</div>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- </div>-->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'searchSelect',
|
||||
data () {
|
||||
return {
|
||||
// 显示的label
|
||||
selectedLabel: '',
|
||||
// 选择的value
|
||||
selectedValue: '',
|
||||
visible: false,
|
||||
// 原始选项数据
|
||||
filterOptions: [],
|
||||
// 选项匹配词
|
||||
searchKey: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* @description: 切换显示状态
|
||||
* @author: chenxiaoxi
|
||||
* @date: 2018/12/25 10:38:54
|
||||
*/
|
||||
visibleToggle () {
|
||||
if (!this.disabled) {
|
||||
this.visible = !this.visible
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description: 选项过滤
|
||||
* @author: chenxiaoxi
|
||||
* @date: 2018/12/25 10:44:38
|
||||
*/
|
||||
handleFilterOptions () {
|
||||
// 匹配项来源
|
||||
if (this.searchKey === '') {
|
||||
this.filterOptions = this.options
|
||||
} else {
|
||||
let result = []
|
||||
// 用原始数据进行匹配
|
||||
if (this.options !== '' && this.options !== null) {
|
||||
this.options.map((opt) => {
|
||||
if (opt.label !== null && opt.label.indexOf(this.searchKey) !== -1) {
|
||||
result.push(opt)
|
||||
}
|
||||
})
|
||||
}
|
||||
this.filterOptions = result
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 对v-model绑定的值进行匹配
|
||||
* @author: chenxiaoxi
|
||||
* @date: 2018/12/25 15:23:46
|
||||
*/
|
||||
handleValue () {
|
||||
if (this.value && this.value !== '') {
|
||||
if (this.options !== '' && this.options !== null) {
|
||||
this.options.map((opt) => {
|
||||
if (opt.value === this.value || opt.id === this.value) {
|
||||
this.selectedLabel = opt.label || opt.name
|
||||
this.selectedValue = opt.value || opt.id
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.selectedLabel = ''
|
||||
this.selectedValue = ''
|
||||
}
|
||||
},
|
||||
// 点击下拉选项事件
|
||||
ondropClick (option) {
|
||||
this.visible = false // 隐藏下拉菜单
|
||||
this.selectedValue = option.value
|
||||
this.selectedLabel = option.label
|
||||
this.$emit('input', option.value) // 赋值给父组件
|
||||
this.$emit('on-change', option.value) // 赋值给父组件
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number]
|
||||
},
|
||||
options: {
|
||||
required: true
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择'
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 栅格比例
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
selectedLabel: {
|
||||
deep: true,
|
||||
handler (val, oldVal) {
|
||||
// 当外层输入框内容清空时, 将selectedValue置为空
|
||||
if (val === '') {
|
||||
this.selectedValue = ''
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听显示状态
|
||||
visible (val) {
|
||||
if (val) {
|
||||
// 当显示的时候,给选项框外绑定事件
|
||||
window.addEventListener('click', function (e) {
|
||||
// 点击的是搜索框外
|
||||
if ($(e.target).parents('.search-select').length === 0) {
|
||||
this.visible = false
|
||||
}
|
||||
}.bind(this))
|
||||
} else {
|
||||
this.searchKey = ''
|
||||
}
|
||||
},
|
||||
// 监听关键词的变化,代替keyup事件
|
||||
searchKey (val) {
|
||||
this.handleFilterOptions()
|
||||
},
|
||||
// 监听最终选取的值
|
||||
selectedValue (val) {
|
||||
if (val === '' || this.selectedLabel === '') {
|
||||
this.$emit('input', val)
|
||||
this.$emit('on-change', val)
|
||||
}
|
||||
},
|
||||
// 监听v-model变化
|
||||
value (val) {
|
||||
this.handleValue()
|
||||
},
|
||||
// 监听options变化
|
||||
options (val, oldVal) {
|
||||
this.filterOptions = JSON.parse(JSON.stringify(this.options))
|
||||
this.handleValue()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.filterOptions = JSON.parse(JSON.stringify(this.options))
|
||||
this.handleValue()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '~@/assets/styles/mixins';
|
||||
@import '~@/assets/styles/style';
|
||||
</style>
|
||||
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<el-col :span="span">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
label-width="150px"
|
||||
class="add-form-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
>
|
||||
<el-select
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
clearable
|
||||
@change="handleChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="opt in options"
|
||||
:key="opt.value"
|
||||
:value="opt.value"
|
||||
:label="opt.label"
|
||||
>
|
||||
{{ opt.label }}
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CustomSelect',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 栅格比例
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请输入${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
},
|
||||
options () {
|
||||
return this.config.options || []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange (event) {
|
||||
// const value = event.target.value
|
||||
this.$emit('input', event)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<el-col :span="span">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
label-width="150px"
|
||||
class="add-form-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
>
|
||||
<el-select
|
||||
v-model="valueArr"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
clearable
|
||||
multiple
|
||||
@change="handleChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="opt in options"
|
||||
:key="opt.value"
|
||||
:value="opt.value"
|
||||
:label="opt.label"
|
||||
>
|
||||
{{ opt.label }}
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CustomSelectArray',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 栅格比例
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
valueArr: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请输入${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
},
|
||||
options () {
|
||||
return this.config.options || []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange (event) {
|
||||
// const value = event.target.value
|
||||
this.$emit('input', event)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
deep: true,
|
||||
handler (val) {
|
||||
if (this.value !== '' && this.value !== null && typeof (this.value) !== 'undefined') {
|
||||
if (this.value instanceof Array) {
|
||||
this.valueArr = this.value
|
||||
} else {
|
||||
this.valueArr = this.value.split(',')
|
||||
}
|
||||
} else if (this.value === '') {
|
||||
this.valueArr = []
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.value !== '' && this.value !== null && typeof (this.value) !== 'undefined') {
|
||||
if (this.value instanceof Array) {
|
||||
this.valueArr = this.value
|
||||
} else {
|
||||
this.valueArr = this.value.split(',')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<el-col :span="span">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
label-width="150px"
|
||||
class="add-form-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
clearable
|
||||
show-word-limit
|
||||
:autosize="{minRows: 1,maxRows: 4}"
|
||||
@input="handleChange"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CustomTextarea',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 栅格比例
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请输入${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange (event) {
|
||||
const value = event.target.value
|
||||
this.$emit('input', value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.standards-info-item >>> textarea {
|
||||
min-height: 32px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<el-col :span="span">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
label-width="150px"
|
||||
class="add-form-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
>
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
popper-class="user-dept-popper"
|
||||
trigger="click"
|
||||
:value="false"
|
||||
>
|
||||
<el-input
|
||||
slot="reference"
|
||||
v-model="config.attrName"
|
||||
:placeholder="placeholder"
|
||||
readonly
|
||||
clearable
|
||||
id="deptBtn1"
|
||||
/>
|
||||
<div class="api">
|
||||
<dept-tree :treeDivId="config.attrField + 'Tree'"
|
||||
:ref="config.attrField"
|
||||
allDept
|
||||
showUser
|
||||
deptSelect
|
||||
checkEnable
|
||||
:editable="false"
|
||||
@treeOnCheck="handleTreeOnCheck"
|
||||
@onDblClick="handleTreeDblClick"
|
||||
style="height: 300px;overflow: auto">
|
||||
</dept-tree>
|
||||
</div>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TreePopover',
|
||||
data () {
|
||||
return {
|
||||
treeCheckNode: [],
|
||||
checkedName: ''
|
||||
}
|
||||
},
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 栅格比例
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请输入${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
},
|
||||
options () {
|
||||
return this.config.options || []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange (event) {
|
||||
// const value = event.target.value
|
||||
this.$emit('input', event)
|
||||
},
|
||||
handleTreeOnCheck (treeCheckNode) {
|
||||
this.treeCheckNode = treeCheckNode
|
||||
},
|
||||
handleTreeDblClick (event, treeId, treeNode) {
|
||||
console.log('event, treeId, treeNode', event, treeId, treeNode)
|
||||
this.$emit('input', treeNode.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<el-col :span="span">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
label-width="150px"
|
||||
class="add-form-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
>
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
popper-class="user-dept-popper"
|
||||
trigger="click"
|
||||
:value="false"
|
||||
>
|
||||
<el-input
|
||||
slot="reference"
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
readonly
|
||||
clearable
|
||||
id="deptBtn1"
|
||||
/>
|
||||
<div class="api">
|
||||
<dept-tree
|
||||
:treeDivId="config.attrField + 'Tree'"
|
||||
:ref="config.attrField"
|
||||
allDept
|
||||
showUser
|
||||
deptSelect
|
||||
checkEnable
|
||||
:editable="false"
|
||||
@treeOnCheck="handleTreeOnCheck"
|
||||
@treeDblClick="handleTreeDblClick"
|
||||
style="height: 300px;overflow: auto"
|
||||
>
|
||||
</dept-tree>
|
||||
</div>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TreePopover',
|
||||
data () {
|
||||
return {
|
||||
treeCheckNode: [],
|
||||
checkedName: ''
|
||||
}
|
||||
},
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 栅格比例
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请输入${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
},
|
||||
options () {
|
||||
return this.config.options || []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange (event) {
|
||||
// const value = event.target.value
|
||||
this.$emit('input', event)
|
||||
},
|
||||
handleTreeOnCheck (treeCheckNode) {
|
||||
this.treeCheckNode = treeCheckNode
|
||||
},
|
||||
handleTreeDblClick (treeId, treeNode) {
|
||||
console.log('event, treeId, treeNode', event, treeId, treeNode)
|
||||
this.$emit('input', treeNode.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<el-col :span="span">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
label-width="150px"
|
||||
class="add-form-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
>
|
||||
<el-input
|
||||
:value="value"
|
||||
:placeholder="'请选择' + config.attrName"
|
||||
readonly
|
||||
:disabled="disabled"
|
||||
:id="config.attrField"
|
||||
@click.native="visible = true"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-drawer
|
||||
:title="config.attrName"
|
||||
:visible.sync="visible"
|
||||
:wrapper-closable="false"
|
||||
size="350px"
|
||||
append-to-body
|
||||
class="org-tree"
|
||||
@opened="drawerOpen"
|
||||
>
|
||||
<dept-tree
|
||||
:ref="config.attrField"
|
||||
:all-dept="allDept"
|
||||
:show-user="config.selVal === 'USERLIST'"
|
||||
:check-enable="true"
|
||||
:deptSelect="true"
|
||||
:treeDivId="config.attrField + 'Tree'"
|
||||
:editable="false"
|
||||
:onlyChecked="config.attrType === 'SEL_OPTS'"
|
||||
@treeOnCheck="handleTreeOnCheck"
|
||||
@treeDblClick="handleTreeDblClick">
|
||||
</dept-tree>
|
||||
|
||||
<div class="demo-drawer-footer">
|
||||
<el-button
|
||||
round
|
||||
class="common-button-primary"
|
||||
icon="el-icon-check"
|
||||
type="primary"
|
||||
@click="handleTreeDrawerConfirm">确定
|
||||
</el-button>
|
||||
<el-button
|
||||
round
|
||||
class="common-button-default"
|
||||
icon="el-icon-close"
|
||||
@click="handleTreeDrawerCancel">取消</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'OrgTree',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 栅格比例
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24
|
||||
},
|
||||
// 是否显示全部部门
|
||||
allDept: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
zNodes: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
treeCheckNode: [],
|
||||
checkedName: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请选择${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
},
|
||||
isString (str) {
|
||||
return (typeof str === 'string') && str.constructor === String
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTreeDblClick (treeId, treeNode) {
|
||||
console.log(treeNode.id)
|
||||
this.checkedName = treeNode.name
|
||||
this.$emit('input', treeNode.id)
|
||||
this.visible = false
|
||||
},
|
||||
handleTreeOnCheck (treeCheckNode) {
|
||||
this.treeCheckNode = treeCheckNode
|
||||
},
|
||||
getShowName (id) {
|
||||
let name = ''
|
||||
this.zNodes.map(item => {
|
||||
if (item.id === id) {
|
||||
name = item.oldname || item.name
|
||||
}
|
||||
})
|
||||
return name
|
||||
},
|
||||
handleTreeDrawerConfirm () {
|
||||
console.log(this.config.selVal)
|
||||
console.log(this.treeCheckNode)
|
||||
if (this.config.selVal === 'USERLIST') {
|
||||
const checkedList = []
|
||||
const checkedNameList = []
|
||||
this.treeCheckNode.map(item => {
|
||||
if (!item.isParent) {
|
||||
checkedList.push(item.id)
|
||||
checkedNameList.push(item.name)
|
||||
}
|
||||
})
|
||||
console.log(checkedNameList)
|
||||
this.checkedName = checkedNameList.join(',')
|
||||
console.log(this.checkedName)
|
||||
this.$emit('input', checkedList.join(','))
|
||||
} else {
|
||||
const checkedList = []
|
||||
const checkedNameList = []
|
||||
this.treeCheckNode.map(item => {
|
||||
checkedList.push(item.id)
|
||||
if (item.oldname) {
|
||||
checkedNameList.push(item.oldname)
|
||||
} else {
|
||||
checkedNameList.push(item.name)
|
||||
}
|
||||
})
|
||||
this.checkedName = checkedNameList.join(',')
|
||||
console.log(this.checkedName)
|
||||
this.$emit('input', checkedList.join(','))
|
||||
}
|
||||
this.visible = false
|
||||
},
|
||||
handleTreeDrawerCancel () {
|
||||
this.visible = false
|
||||
},
|
||||
// 赋值回显人员和部门
|
||||
drawerOpen () {
|
||||
let checkedArr = this.config.value ? this.config.value.split(',') : []
|
||||
if (checkedArr.length > 0) {
|
||||
setTimeout(() => {
|
||||
this.$nextTick(() => {
|
||||
this.$refs[this.config.attrField].checkedNode(checkedArr)
|
||||
})
|
||||
}, 1500)
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (newVal) {
|
||||
console.log(newVal)
|
||||
this.checkedName = newVal || ''
|
||||
},
|
||||
checkedName (val) {
|
||||
console.log(val)
|
||||
this.$emit('update:value', val)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.checkedName = this.config.valueName || ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,287 @@
|
||||
<!--角色管理树组件-->
|
||||
<template>
|
||||
<!-- <el-col :span="span">-->
|
||||
<span>
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
class="search-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
>
|
||||
<el-input
|
||||
v-model="checkedName"
|
||||
:placeholder="'请选择' + config.attrName"
|
||||
readonly
|
||||
:disabled="disabled"
|
||||
:id="config.attrField"
|
||||
@click.native="handleClick"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-drawer
|
||||
:title="config.attrName"
|
||||
:visible.sync="visible"
|
||||
:wrapper-closable="false"
|
||||
size="350px"
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
>
|
||||
<div class="demo-drawer-content">
|
||||
<div class="search-area">
|
||||
<div class="left">
|
||||
<el-form inline class="label-input-form" >
|
||||
<el-form-item label="角色组" class="search-item">
|
||||
<el-select
|
||||
v-model="roleHierarchy"
|
||||
filterable
|
||||
@change="roleHierarchyChange"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in roleHierarchyOption"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.name"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<laws-tree
|
||||
v-if="visible"
|
||||
:ref="config.attrField"
|
||||
:zNodes="zNodes"
|
||||
:treeDivId="config.attrField + 'Tree'"
|
||||
:editable="false"
|
||||
:chkboxType="{ 'Y': '', 'N': '' }"
|
||||
:check-enable="checkEnable"
|
||||
:onlyChecked="checkEnable"
|
||||
deptSelect
|
||||
@treeOnCheck="handleTreeOnCheck"
|
||||
@treeDblClick="handleTreeDblClick"
|
||||
></laws-tree>
|
||||
</div>
|
||||
<div class="demo-drawer-footer" v-if="checkEnable">
|
||||
<el-button
|
||||
round
|
||||
class="common-button-primary"
|
||||
icon="el-icon-check"
|
||||
type="primary"
|
||||
@click="handleTreeDrawerConfirm">确定
|
||||
</el-button>
|
||||
<el-button
|
||||
round
|
||||
class="common-button-default"
|
||||
icon="el-icon-close"
|
||||
@click="handleTreeDrawerCancel">取消</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</span>
|
||||
<!-- </el-col>-->
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'RoleTree',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 栅格比例
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24
|
||||
},
|
||||
// 原数据对象
|
||||
dataModel: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
labelWidth: {
|
||||
type: String,
|
||||
default: '150px'
|
||||
},
|
||||
// 是否显示全部的角色树
|
||||
allRole: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isSearch: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 多选和单选参数
|
||||
checkEnable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
treeCheckNode: [],
|
||||
checkedName: '',
|
||||
roleList: [],
|
||||
loading: false,
|
||||
zNodes: [],
|
||||
roleHierarchy: '',
|
||||
roleHierarchyOption: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请选择${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
},
|
||||
isString (str) {
|
||||
return (typeof str === 'string') && str.constructor === String
|
||||
},
|
||||
ZRBM () {
|
||||
return this.dataModel['ZRBM'] || ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
if (this.disabled) {
|
||||
return false
|
||||
}
|
||||
this.getRoleGroup()
|
||||
if (!this.allRole) {
|
||||
if (this.isSearch) {
|
||||
// if (!this.dataModel.orgId || this.dataModel.orgId === '') {
|
||||
// this.$message.warning('请先选择部门')
|
||||
// } else {
|
||||
this.visible = true
|
||||
this.getUserByRole(this.dataModel.orgId)
|
||||
// }
|
||||
} else {
|
||||
// if (!this.ZRBM || this.ZRBM === '') {
|
||||
// this.$message.warning('请先选择责任部门')
|
||||
// } else {
|
||||
this.visible = true
|
||||
this.getUserByRole(this.ZRBM)
|
||||
// }
|
||||
}
|
||||
} else {
|
||||
this.visible = true
|
||||
this.getUserByRole(this.ZRBM)
|
||||
}
|
||||
},
|
||||
// 查询指定角色树
|
||||
getUserByRole (orgId, roleHierarchy) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.loading = true
|
||||
this.$http.get('sys/role/getRoleByOrgId', {
|
||||
roleHierarchy,
|
||||
type: 0
|
||||
}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
this.loading = false
|
||||
if (res.ok) {
|
||||
const treeNodeList = []
|
||||
for (let i = 0; i < res.data.length; i++) {
|
||||
let obj = {}
|
||||
for (let key in res.data[i]) {
|
||||
if (key === 'usid') {
|
||||
obj.id = res.data[i][key]
|
||||
} else if (key === 'orgId') {
|
||||
obj.pId = res.data[i][key]
|
||||
} else {
|
||||
obj[key] = res.data[i][key]
|
||||
}
|
||||
}
|
||||
treeNodeList.push(obj)
|
||||
}
|
||||
// 获取组织与人员完毕，开始组装树结构
|
||||
let zNodes = []
|
||||
for (let i = 0; i < treeNodeList.length; i++) {
|
||||
let zObj = {}
|
||||
zObj.id = treeNodeList[i].id
|
||||
zObj.pId = treeNodeList[i].pId
|
||||
zObj.name = treeNodeList[i].name
|
||||
zObj.icon = 'static/images/user.png'
|
||||
zObj.iconSkin = 'org-user'
|
||||
zObj.shotName = treeNodeList[i].shotName
|
||||
zObj.remarks = treeNodeList[i].remarks
|
||||
if (zObj.pId === null && !zObj.isParent) {
|
||||
zObj.pId = ''
|
||||
zObj.orgName = '未分配人员'
|
||||
}
|
||||
zNodes[i] = zObj
|
||||
}
|
||||
this.zNodes = zNodes
|
||||
}
|
||||
resolve()
|
||||
}, e => {
|
||||
this.loading = false
|
||||
reject(e)
|
||||
})
|
||||
})
|
||||
},
|
||||
handleTreeOnCheck (treeCheckNode) {
|
||||
this.treeCheckNode = treeCheckNode
|
||||
},
|
||||
handleTreeDrawerConfirm () {
|
||||
const checkedList = []
|
||||
const checkedNameList = []
|
||||
this.treeCheckNode.map(item => {
|
||||
checkedList.push(item.id)
|
||||
checkedNameList.push(item.oldname || item.name)
|
||||
})
|
||||
this.checkedName = checkedNameList.join(',')
|
||||
this.$emit('input', checkedList.join(','))
|
||||
// this.$emit('on-checked', this.checkedName)
|
||||
this.visible = false
|
||||
},
|
||||
handleTreeDblClick (treeId, treeNode) {
|
||||
this.$emit('input', treeNode.id)
|
||||
this.checkedName = treeNode.oldname || treeNode.name
|
||||
this.visible = false
|
||||
},
|
||||
handleTreeDrawerCancel () {
|
||||
this.visible = false
|
||||
},
|
||||
// 查询角色组
|
||||
getRoleGroup () {
|
||||
this.$http.get('sys/role/getRoleGroup', {}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
if (res.ok) {
|
||||
this.roleHierarchyOption = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
// 角色组change查询角色树
|
||||
roleHierarchyChange (val) {
|
||||
this.getUserByRole(this.ZRBM, val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.search-area{
|
||||
padding: 10px 0 0 10px;
|
||||
.search-item{
|
||||
margin: 0;
|
||||
}
|
||||
/deep/.el-input__inner{
|
||||
width: 270px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,345 @@
|
||||
<!--角色管理树组件-->
|
||||
<template>
|
||||
<el-col :span="span">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
:label-width="labelWidth"
|
||||
class="add-form-item expand-form-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
>
|
||||
<el-input
|
||||
:title="checkedName"
|
||||
v-model="checkedName"
|
||||
:placeholder="'请选择' + config.attrName"
|
||||
readonly
|
||||
:disabled="disabled"
|
||||
:id="config.attrField"
|
||||
@click.native="handleClick"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-drawer
|
||||
:title="config.attrName"
|
||||
:visible.sync="visible"
|
||||
:wrapper-closable="false"
|
||||
size="350px"
|
||||
append-to-body
|
||||
@opened="drawerOpen"
|
||||
>
|
||||
<div class="demo-drawer-content">
|
||||
<div class="search-area" v-if="isRoleHierarchy">
|
||||
<div class="left">
|
||||
<el-form inline class="label-input-form">
|
||||
<el-form-item label="角色组" class="search-item">
|
||||
<el-select
|
||||
v-model="roleHierarchy"
|
||||
filterable
|
||||
@change="roleHierarchyChange"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in roleHierarchyOption"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.name"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<laws-tree
|
||||
:ref="config.attrField"
|
||||
:zNodes="zNodes"
|
||||
:treeDivId="config.attrField + 'Tree'"
|
||||
:editable="false"
|
||||
:chkboxType="{ 'Y': '', 'N': '' }"
|
||||
:check-enable="true"
|
||||
:onlyChecked="true"
|
||||
deptSelect
|
||||
expandFirst
|
||||
initNotCheck
|
||||
:checkIdList="checkIdList"
|
||||
@treeOnCheck="handleTreeOnCheck"
|
||||
></laws-tree>
|
||||
</div>
|
||||
<div class="demo-drawer-footer">
|
||||
<el-button
|
||||
round
|
||||
class="common-button-primary"
|
||||
icon="el-icon-check"
|
||||
type="primary"
|
||||
@click="handleTreeDrawerConfirm">确定
|
||||
</el-button>
|
||||
<el-button
|
||||
round
|
||||
class="common-button-default"
|
||||
icon="el-icon-close"
|
||||
@click="handleTreeDrawerCancel">取消</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</el-col>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'RoleTree',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 栅格比例
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24
|
||||
},
|
||||
// 原数据对象
|
||||
dataModel: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
labelWidth: {
|
||||
type: String,
|
||||
default: '150px'
|
||||
},
|
||||
// 是否显示全部的角色树
|
||||
allRole: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示角色组下拉框
|
||||
isRoleHierarchy: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 角色组名称
|
||||
roleHierarchyName: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
treeCheckNode: [],
|
||||
checkedName: '',
|
||||
roleList: [],
|
||||
loading: false,
|
||||
zNodes: [],
|
||||
roleHierarchy: '',
|
||||
roleHierarchyOption: [],
|
||||
checkIdList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请选择${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
},
|
||||
isString (str) {
|
||||
return (typeof str === 'string') && str.constructor === String
|
||||
},
|
||||
ZRBM () {
|
||||
return this.dataModel['ZRBM'] || ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
if (this.disabled) {
|
||||
return false
|
||||
}
|
||||
this.getRoleGroup()
|
||||
if (!this.allRole) {
|
||||
if (!this.dataModel.ZRBM || this.dataModel.ZRBM === '') {
|
||||
this.$message.warning('请先选择责任部门')
|
||||
} else {
|
||||
this.visible = true
|
||||
this.getDeptChild().then(treeNodeList => {
|
||||
this.getUserByRole(this.dataModel.ZRBM, '', this.roleHierarchyName, treeNodeList)
|
||||
})
|
||||
// this.getUserByRole(this.dataModel.ZRBM, '', this.roleHierarchyName)
|
||||
}
|
||||
} else {
|
||||
this.visible = true
|
||||
this.getDeptChild().then(treeNodeList => {
|
||||
this.getUserByRole(this.dataModel.ZRBM, '', this.roleHierarchyName, treeNodeList)
|
||||
})
|
||||
}
|
||||
},
|
||||
// 获取选中的部门下子子部门
|
||||
getDeptChild () {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$http.get('sys/org/getChildDept', {
|
||||
orgId: this.dataModel.ZRBM
|
||||
}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
if (res.ok) {
|
||||
// 获取组织与人员完毕，开始组装树结构
|
||||
let zNodes = []
|
||||
let treeNodeList = res.data
|
||||
for (let i = 0; i < treeNodeList.length; i++) {
|
||||
let zObj = {}
|
||||
zObj.id = treeNodeList[i].id
|
||||
zObj.pId = treeNodeList[i].pId
|
||||
// 该节点为机构
|
||||
zObj.name = treeNodeList[i].orgName
|
||||
zObj.icon = 'static/images/dept.png'
|
||||
zObj.isParent = true
|
||||
zObj.shotName = treeNodeList[i].shotName
|
||||
zObj.remarks = treeNodeList[i].remarks
|
||||
zObj.iconSkin = 'org-dept'
|
||||
zNodes[i] = zObj
|
||||
}
|
||||
resolve(res.data)
|
||||
}
|
||||
}, e => {
|
||||
reject(e)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 查询指定角色树
|
||||
getUserByRole (orgId, roleHierarchy, roleHierarchyName, treeNodeList) {
|
||||
this.loading = true
|
||||
this.$http.get('sys/role/getRoleByOrgId', {
|
||||
orgId,
|
||||
roleHierarchy,
|
||||
roleHierarchyName,
|
||||
type: 0
|
||||
}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
this.loading = false
|
||||
if (res.ok) {
|
||||
for (let i = 0; i < res.data.length; i++) {
|
||||
let obj = {}
|
||||
for (let key in res.data[i]) {
|
||||
if (key === 'usid') {
|
||||
obj.id = res.data[i][key]
|
||||
} else if (key === 'orgId') {
|
||||
obj.pId = res.data[i][key]
|
||||
} else {
|
||||
obj[key] = res.data[i][key]
|
||||
}
|
||||
}
|
||||
treeNodeList.push(obj)
|
||||
}
|
||||
// 获取组织与人员完毕，开始组装树结构
|
||||
let zNodes = []
|
||||
for (let i = 0; i < treeNodeList.length; i++) {
|
||||
let zObj = {}
|
||||
// 该节点为角色
|
||||
if (!treeNodeList[i].orgName) {
|
||||
zObj.id = treeNodeList[i].id
|
||||
zObj.pId = treeNodeList[i].dyOrgId
|
||||
zObj.name = treeNodeList[i].name
|
||||
zObj.icon = 'static/images/user.png'
|
||||
zObj.iconSkin = 'org-user'
|
||||
zObj.shotName = treeNodeList[i].shotName
|
||||
zObj.remarks = treeNodeList[i].remarks
|
||||
} else {
|
||||
// 该节点为机构
|
||||
zObj.id = treeNodeList[i].id
|
||||
zObj.pId = treeNodeList[i].pId
|
||||
zObj.name = treeNodeList[i].orgName
|
||||
zObj.oldname = treeNodeList[i].orgName
|
||||
zObj.icon = 'static/images/dept.png'
|
||||
zObj.iconSkin = 'org-dept'
|
||||
zObj.isParent = true
|
||||
zObj.isChecked = true
|
||||
}
|
||||
if (zObj.pId === null && !zObj.isParent) {
|
||||
zObj.pId = ''
|
||||
zObj.orgName = '未分配人员'
|
||||
}
|
||||
zNodes[i] = zObj
|
||||
}
|
||||
this.zNodes = zNodes
|
||||
}
|
||||
}, e => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
handleTreeOnCheck (treeCheckNode) {
|
||||
this.treeCheckNode = treeCheckNode
|
||||
},
|
||||
handleTreeDrawerConfirm () {
|
||||
const checkedList = []
|
||||
const checkedNameList = []
|
||||
this.treeCheckNode.map(item => {
|
||||
checkedList.push(item.id)
|
||||
checkedNameList.push(item.oldname || item.name)
|
||||
})
|
||||
this.checkedName = checkedNameList.join(',')
|
||||
this.$emit('input', checkedList.join(','))
|
||||
this.$emit('on-checked', this.checkedName)
|
||||
this.visible = false
|
||||
},
|
||||
handleTreeDrawerCancel () {
|
||||
this.visible = false
|
||||
},
|
||||
// 查询角色组
|
||||
getRoleGroup () {
|
||||
this.$http.get('sys/role/getRoleGroup', {}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
if (res.ok) {
|
||||
this.roleHierarchyOption = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
// 角色组change查询角色树
|
||||
roleHierarchyChange (val) {
|
||||
this.getDeptChild().then(treeNodeList => {
|
||||
this.getUserByRole(this.dataModel.ZRBM, val, '', treeNodeList)
|
||||
})
|
||||
},
|
||||
// 赋值回显
|
||||
drawerOpen () {
|
||||
this.checkIdList = this.value ? this.value.split(',') : []
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value (newVal, oldVal) {
|
||||
this.checkedName = newVal !== '' ? this.checkedName : ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.checkedName = this.config.valueName || ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.search-area{
|
||||
padding: 10px 0 0 10px;
|
||||
.search-item{
|
||||
margin: 0;
|
||||
}
|
||||
/deep/.el-input__inner{
|
||||
width: 270px !important;
|
||||
}
|
||||
}
|
||||
::v-deep .el-drawer__header{
|
||||
&>span:first-child{
|
||||
outline: none!important;
|
||||
}
|
||||
}
|
||||
::v-deep .el-drawer{
|
||||
outline: none!important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,337 @@
|
||||
<!--角色管理树组件-->
|
||||
<template>
|
||||
<el-col :span="span">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
:label-width="labelWidth"
|
||||
class="add-form-item expand-form-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
>
|
||||
<el-input
|
||||
:title="checkedName"
|
||||
v-model="checkedName"
|
||||
:placeholder="'请选择' + config.attrName"
|
||||
readonly
|
||||
:disabled="disabled"
|
||||
:id="config.attrField"
|
||||
@click.native="handleClick"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-drawer
|
||||
:title="config.attrName"
|
||||
:visible.sync="visible"
|
||||
:wrapper-closable="false"
|
||||
size="350px"
|
||||
append-to-body
|
||||
@opened="drawerOpen"
|
||||
>
|
||||
<div class="demo-drawer-content">
|
||||
<div class="search-area" v-if="isRoleHierarchy">
|
||||
<div class="left">
|
||||
<el-form inline class="label-input-form">
|
||||
<el-form-item label="角色组" class="search-item">
|
||||
<el-select
|
||||
v-model="roleHierarchy"
|
||||
filterable
|
||||
@change="roleHierarchyChange"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in roleHierarchyOption"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.name"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<laws-tree
|
||||
:ref="config.attrField"
|
||||
:zNodes="zNodes"
|
||||
:treeDivId="config.attrField + 'Tree'"
|
||||
:editable="false"
|
||||
:chkboxType="{ 'Y': '', 'N': '' }"
|
||||
:check-enable="true"
|
||||
:onlyChecked="true"
|
||||
deptSelect
|
||||
expandFirst
|
||||
initNotCheck
|
||||
:checkIdList="checkIdList"
|
||||
@treeOnCheck="handleTreeOnCheck"
|
||||
></laws-tree>
|
||||
</div>
|
||||
<div class="demo-drawer-footer">
|
||||
<el-button
|
||||
round
|
||||
class="common-button-primary"
|
||||
icon="el-icon-check"
|
||||
type="primary"
|
||||
@click="handleTreeDrawerConfirm">确定
|
||||
</el-button>
|
||||
<el-button
|
||||
round
|
||||
class="common-button-default"
|
||||
icon="el-icon-close"
|
||||
@click="handleTreeDrawerCancel">取消</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</el-col>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'RoleTree',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 栅格比例
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24
|
||||
},
|
||||
// 原数据对象
|
||||
dataModel: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
labelWidth: {
|
||||
type: String,
|
||||
default: '150px'
|
||||
},
|
||||
// 是否显示全部的角色树
|
||||
allRole: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示角色组下拉框
|
||||
isRoleHierarchy: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 角色组名称
|
||||
roleHierarchyName: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
treeCheckNode: [],
|
||||
checkedName: '',
|
||||
roleList: [],
|
||||
loading: false,
|
||||
zNodes: [],
|
||||
roleHierarchy: '',
|
||||
roleHierarchyOption: [],
|
||||
checkIdList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请选择${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
},
|
||||
isString (str) {
|
||||
return (typeof str === 'string') && str.constructor === String
|
||||
},
|
||||
ZRBM () {
|
||||
return this.dataModel['ZRBM'] || ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
if (this.disabled) {
|
||||
return false
|
||||
}
|
||||
this.getRoleGroup()
|
||||
if (!this.allRole) {
|
||||
if (!this.dataModel.ZRBM || this.dataModel.ZRBM === '') {
|
||||
this.$message.warning('请先选择责任部门')
|
||||
} else {
|
||||
this.visible = true
|
||||
this.getDeptChild().then(treeNodeList => {
|
||||
this.getUserByRole(this.dataModel.ZRBM, '', this.roleHierarchyName, treeNodeList)
|
||||
})
|
||||
// this.getUserByRole(this.dataModel.ZRBM, '', this.roleHierarchyName)
|
||||
}
|
||||
} else {
|
||||
this.visible = true
|
||||
this.getDeptChild().then(treeNodeList => {
|
||||
this.getUserByRole(this.dataModel.ZRBM, '', this.roleHierarchyName, treeNodeList)
|
||||
})
|
||||
}
|
||||
},
|
||||
// 获取选中的部门下子子部门
|
||||
getDeptChild () {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$http.get('sys/org/getChildDept', {
|
||||
orgId: this.dataModel.ZRBM
|
||||
}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
if (res.ok) {
|
||||
// 获取组织与人员完毕，开始组装树结构
|
||||
let zNodes = []
|
||||
let treeNodeList = res.data
|
||||
for (let i = 0; i < treeNodeList.length; i++) {
|
||||
let zObj = {}
|
||||
zObj.id = treeNodeList[i].id
|
||||
zObj.pId = treeNodeList[i].pId
|
||||
// 该节点为机构
|
||||
zObj.name = treeNodeList[i].orgName
|
||||
zObj.icon = 'static/images/dept.png'
|
||||
zObj.isParent = true
|
||||
zObj.shotName = treeNodeList[i].shotName
|
||||
zObj.remarks = treeNodeList[i].remarks
|
||||
zObj.iconSkin = 'org-dept'
|
||||
zNodes[i] = zObj
|
||||
}
|
||||
resolve(res.data)
|
||||
}
|
||||
}, e => {
|
||||
reject(e)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 查询指定角色树
|
||||
getUserByRole (orgId, roleHierarchy, roleHierarchyName, treeNodeList) {
|
||||
this.loading = true
|
||||
this.$http.get('sys/role/getRoleByOrgId', {
|
||||
orgId,
|
||||
roleHierarchy,
|
||||
roleHierarchyName,
|
||||
// type: 0
|
||||
}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
this.loading = false
|
||||
if (res.ok) {
|
||||
for (let i = 0; i < res.data.length; i++) {
|
||||
let obj = {}
|
||||
for (let key in res.data[i]) {
|
||||
if (key === 'usid') {
|
||||
obj.id = res.data[i][key]
|
||||
} else if (key === 'orgId') {
|
||||
obj.pId = res.data[i][key]
|
||||
} else {
|
||||
obj[key] = res.data[i][key]
|
||||
}
|
||||
}
|
||||
treeNodeList.push(obj)
|
||||
}
|
||||
// 获取组织与人员完毕，开始组装树结构
|
||||
let zNodes = []
|
||||
for (let i = 0; i < treeNodeList.length; i++) {
|
||||
let zObj = {}
|
||||
// 该节点为角色
|
||||
if (!treeNodeList[i].orgName) {
|
||||
zObj.id = treeNodeList[i].id
|
||||
zObj.pId = treeNodeList[i].dyOrgId
|
||||
zObj.name = treeNodeList[i].name
|
||||
zObj.icon = 'static/images/user.png'
|
||||
zObj.iconSkin = 'org-user'
|
||||
zObj.shotName = treeNodeList[i].shotName
|
||||
zObj.remarks = treeNodeList[i].remarks
|
||||
} else {
|
||||
// 该节点为机构
|
||||
zObj.id = treeNodeList[i].id
|
||||
zObj.pId = treeNodeList[i].pId
|
||||
zObj.name = treeNodeList[i].orgName
|
||||
zObj.oldname = treeNodeList[i].orgName
|
||||
zObj.icon = 'static/images/dept.png'
|
||||
zObj.iconSkin = 'org-dept'
|
||||
zObj.isParent = true
|
||||
zObj.isChecked = true
|
||||
}
|
||||
if (zObj.pId === null && !zObj.isParent) {
|
||||
zObj.pId = ''
|
||||
zObj.orgName = '未分配人员'
|
||||
}
|
||||
zNodes[i] = zObj
|
||||
}
|
||||
this.zNodes = zNodes
|
||||
}
|
||||
}, e => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
handleTreeOnCheck (treeCheckNode) {
|
||||
this.treeCheckNode = treeCheckNode
|
||||
},
|
||||
handleTreeDrawerConfirm () {
|
||||
const checkedList = []
|
||||
const checkedNameList = []
|
||||
this.treeCheckNode.map(item => {
|
||||
checkedList.push(item.id)
|
||||
checkedNameList.push(item.oldname || item.name)
|
||||
})
|
||||
this.checkedName = checkedNameList.join(',')
|
||||
this.$emit('input', checkedList.join(','))
|
||||
this.$emit('on-checked', this.checkedName)
|
||||
this.visible = false
|
||||
},
|
||||
handleTreeDrawerCancel () {
|
||||
this.visible = false
|
||||
},
|
||||
// 查询角色组
|
||||
getRoleGroup () {
|
||||
this.$http.get('sys/role/getRoleGroup', {}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
if (res.ok) {
|
||||
this.roleHierarchyOption = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
// 角色组change查询角色树
|
||||
roleHierarchyChange (val) {
|
||||
this.getDeptChild().then(treeNodeList => {
|
||||
this.getUserByRole(this.dataModel.ZRBM, val, '', treeNodeList)
|
||||
})
|
||||
},
|
||||
// 赋值回显
|
||||
drawerOpen () {
|
||||
this.checkIdList = this.value ? this.value.split(',') : []
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value (newVal, oldVal) {
|
||||
this.checkedName = newVal !== '' ? this.checkedName : ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.checkedName = this.config.valueName || ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.search-area{
|
||||
padding: 10px 0 0 10px;
|
||||
.search-item{
|
||||
margin: 0;
|
||||
}
|
||||
/deep/.el-input__inner{
|
||||
width: 270px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user