290 lines
8.3 KiB
Vue
290 lines
8.3 KiB
Vue
<!--
|
|
*传参示例
|
|
html:
|
|
<input-select-checkbox
|
|
:type="typeSon"
|
|
:name="nameSon"
|
|
:value="valueSon"
|
|
:options="optionSon">
|
|
</input-select-checkbox>
|
|
js:
|
|
this.typeSon = 'select'//类型
|
|
this.nameSon = '算法描述'//名称
|
|
this.valueSon = '这是一个描述'//内容
|
|
this.optionSon = ['1', '2', '3']//选项
|
|
-->
|
|
<template>
|
|
<div id="inputSelectCheckbox">
|
|
<!-- input框 -->
|
|
<a-input v-if="type == 'input'" v-model:value="data.note1" :placeholder="'请输入' + name" @change="changeIiem(name,data.note1)"/>
|
|
<!-- 下拉框 -->
|
|
<el-select
|
|
v-else-if="(type === 'select' && name !== '归属部门' && name !== '使用方式' && name !== '所属产品线') || type == 'radio'"
|
|
style="width: 240px"
|
|
v-model:value="data.note1"
|
|
@change="changeIiem(name,data.note1)"
|
|
:placeholder="'请选择' + name">
|
|
<el-option
|
|
:value="itemSelect.dictLabel"
|
|
v-for="(itemSelect, indexSelect) in options"
|
|
:key="indexSelect">
|
|
{{ itemSelect.dictLabel }}
|
|
</el-option>
|
|
</el-select>
|
|
<el-select
|
|
v-else-if="(type === 'select' && (name === '归属部门' || name === '所属产品线'))"
|
|
style="width:240px"
|
|
v-model:value="data.note1"
|
|
filterable
|
|
placeholder="请输入关键词"
|
|
@change="changeIiem(name,data.note1)"
|
|
:loading="loading">
|
|
<el-option
|
|
v-for="(itemSelect) in options"
|
|
:key="itemSelect.id"
|
|
:label="itemSelect.name"
|
|
:value="itemSelect.id">
|
|
{{ itemSelect.name }}
|
|
</el-option>
|
|
</el-select>
|
|
<el-select
|
|
v-else-if="(type === 'select' && name === '使用方式')"
|
|
style="width: 240px"
|
|
v-model:value="data.note1"
|
|
:placeholder="'请选择' + name"
|
|
@change="showTypeClick"
|
|
>
|
|
<el-option
|
|
:value="itemSelect.dictLabel"
|
|
v-for="(itemSelect, indexSelect) in options"
|
|
:key="indexSelect">
|
|
{{ itemSelect.dictLabel }}
|
|
</el-option>
|
|
</el-select>
|
|
<!-- 多选 -->
|
|
<div
|
|
v-else-if="type === 'checkBox'"
|
|
>
|
|
<el-checkbox-group v-model="valueCheckBox" @change='chekBoxChange'>
|
|
<el-checkbox-button v-for="val in options" :label="val.dictLabel" :key="val.dictLabel">{{val.dictLabel}}</el-checkbox-button>
|
|
</el-checkbox-group>
|
|
</div>
|
|
<!-- 不可点的input框 -->
|
|
<el-input
|
|
v-else-if="type === 'disabled'"
|
|
v-model="value"
|
|
:placeholder="'请输入' + name"
|
|
:disabled="true"
|
|
@change="changeIiem(name,data.note1)"
|
|
/>
|
|
<!-- 单选 -->
|
|
<!-- <el-radio-group v-model:value="data.note1" v-else-if="type == 'radio'">
|
|
<el-radio v-for="item in options" :label="item.dictLabel" :key="item.dictLabel">{{item.dictLabel}}</el-radio>
|
|
</el-radio-group> -->
|
|
<a-textarea v-else-if="type == 'textArea'" @change="changeIiem(name,data.note1)" v-model:value="data.note1" :showCount="true" :maxlength="200" :placeholder="'请填写' + name" />
|
|
<div class="block" v-else-if="type == 'date'">
|
|
<el-date-picker v-model="data.note1" type="date" :placeholder="'选择' + name" value-format="yyyy-MM-dd">
|
|
</el-date-picker>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'inputSelectCheckbox',
|
|
components: {
|
|
|
|
},
|
|
props: {
|
|
type: String,
|
|
data: Array,
|
|
name: String,
|
|
value: String,
|
|
changeField: Array,
|
|
options: {
|
|
type: Array,
|
|
default: null
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
// 多选放数据的数组
|
|
valueCheckBox: [],
|
|
// 单选数据
|
|
regionSelect: '',
|
|
showKey: 0,
|
|
showType: ''
|
|
}
|
|
},
|
|
methods: {
|
|
changeIiem (name, value) {
|
|
if (value && value !== '' && this.changeField.indexOf(name) == -1) {
|
|
this.changeField.push(name)
|
|
} else if (!value || value == '') {
|
|
if (this.changeField.indexOf(name) > -1) {
|
|
this.changeField.splice(this.changeField.indexOf(name), 1)
|
|
}
|
|
}
|
|
},
|
|
selectOptions () {
|
|
if (this.data.isLinkToDic === 'true' && this.data.linkValue) {
|
|
this.$http
|
|
.get(`/sys/dict/data/page?page=1&limit=20&dictTypeId=${this.data.linkValue}&deFlage=0`).then(({ data: res }) => {
|
|
const dataList = []
|
|
res.data.list.forEach((element) => {
|
|
dataList.push(element)
|
|
})
|
|
this.options = dataList
|
|
})
|
|
.catch(() => {})
|
|
} else if (this.data.name === '归属部门' || this.data.name === '所属产品线') {
|
|
this.$http.get('/sys/dept/all').then(res => {
|
|
const dataList = []
|
|
res.data.data.forEach((element) => {
|
|
dataList.push(element)
|
|
})
|
|
this.options = dataList
|
|
if (!this.data.note1) {
|
|
this.$http.get('/sys/user/info').then(({ data: res }) => {
|
|
console.log(res.data)
|
|
this.data.note1 = res.data.deptId
|
|
})
|
|
}
|
|
})
|
|
} else if (this.data.name === '部门联系人') {
|
|
// this.$http.get('/sys/dept/all').then(res => {
|
|
// const dataList = []
|
|
// res.data.data.forEach((element) => {
|
|
// dataList.push(element)
|
|
// })
|
|
// this.options = dataList
|
|
if (this.data.note1 == null) {
|
|
this.$http.get('/sys/user/info').then(({ data: res }) => {
|
|
console.log(res.data)
|
|
this.data.note1 = res.data.realName || ''
|
|
})
|
|
}
|
|
// })
|
|
} else if (this.data.name === '部门联系人电话') {
|
|
// this.$http.get('/sys/dept/all').then(res => {
|
|
// const dataList = []
|
|
// res.data.data.forEach((element) => {
|
|
// dataList.push(element)
|
|
// })
|
|
// this.options = dataList
|
|
if (this.data.note1 == null) {
|
|
this.$http.get('/sys/user/info').then(({ data: res }) => {
|
|
console.log(res.data)
|
|
this.data.note1 = res.data.mobile || ''
|
|
})
|
|
}
|
|
// })
|
|
}
|
|
},
|
|
chekBoxChange (list) {
|
|
let str = ''
|
|
list.map((val, index) => {
|
|
str += val
|
|
if (index < list.length - 1) {
|
|
str += ';'
|
|
}
|
|
})
|
|
this.data.note1 = str
|
|
if (str !== '' && this.changeField.indexOf('应用领域') == -1) {
|
|
this.changeField.push('应用领域')
|
|
} else if (str == '') {
|
|
if (this.changeField.indexOf('应用领域') > -1) {
|
|
this.changeField.splice(this.changeField.indexOf('应用领域'), 1)
|
|
}
|
|
}
|
|
},
|
|
showTypeClick (e) {
|
|
this.showType = e
|
|
console.log(e)
|
|
this.$emit('show-type', this.showType)
|
|
}
|
|
},
|
|
created () {
|
|
if (this.data.name === '应用领域') {
|
|
if (this.data.note1) {
|
|
this.valueCheckBox = this.data.note1.split(';')
|
|
}
|
|
} else if (this.data.name === '发布端') {
|
|
if (this.data.note1) {
|
|
this.valueCheckBox = this.data.note1.split(';')
|
|
}
|
|
}
|
|
},
|
|
mounted () {
|
|
this.selectOptions()
|
|
this.showTypeClick('调用接口')
|
|
}
|
|
}
|
|
</script>
|
|
<style lang='scss' scoped>
|
|
#inputSelectCheckbox {
|
|
// margin-top: 20px;
|
|
width: calc(100% - 105px);
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
span:first-child {
|
|
display: block;
|
|
width: 120px;
|
|
}
|
|
::v-deep .el-select {
|
|
.el-input__inner {
|
|
resize: none;
|
|
width: 240px;
|
|
}
|
|
}
|
|
::v-deep .ant-input {
|
|
width: 100%;
|
|
}
|
|
::v-deep .el-input__inner {
|
|
resize: none;
|
|
width: 100%;
|
|
}
|
|
::v-deep .el-textarea {
|
|
width: 100%;
|
|
}
|
|
::v-deep .el-textarea__inner {
|
|
width: 100%;
|
|
height: 76px;
|
|
min-height: 32px;
|
|
resize: none;
|
|
}
|
|
::v-deep .el-input__count {
|
|
bottom: -20px;
|
|
right: 5px;
|
|
}
|
|
::v-deep .el-checkbox-group {
|
|
width: 100%;
|
|
display: grid;
|
|
margin-top: -5px;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
|
}
|
|
::v-deep .el-checkbox-button__inner {
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
width: 90px;
|
|
height: 26px;
|
|
border-radius: 13px;
|
|
color: #333333;
|
|
background: #f5f5f5;
|
|
border: 1px #cccccc solid;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 10px 5px 0;
|
|
font-weight: 500;
|
|
}
|
|
::v-deep .el-checkbox-button.is-checked .el-checkbox-button__inner {
|
|
background: #0087ff;
|
|
color: #fff;
|
|
box-shadow: unset;
|
|
}
|
|
}
|
|
</style>
|