|
@@ -1,246 +1,325 @@
|
|
|
<template>
|
|
|
- <div class="PatentField height_100">
|
|
|
- <el-container class="height_100" style="width: 300px;float: right;">
|
|
|
- <el-main>
|
|
|
- <template>
|
|
|
- <el-form label-position="top" class="custom-field-form">
|
|
|
- <el-form-item v-for="item in field" :key="item.id">
|
|
|
- <template slot="label">
|
|
|
- <span :title="item.name" class="name">{{ item.name }}</span>
|
|
|
- </template>
|
|
|
- <!-- 已选择 -->
|
|
|
- <template v-if="[4, 5, 6].includes(item.type)">
|
|
|
- <div style="display: flex;align-items: center;">
|
|
|
- <!-- <el-popover placement="top-start" title="标题" width="200" trigger="hover"
|
|
|
- >
|
|
|
- <div v-for="checks in dataShow.filter(showItem =>{ return showItem.type == item.type})" :key="checks.id">
|
|
|
- <span>{{ checks.name }}</span>
|
|
|
- </div>
|
|
|
- <div slot="reference">已选择的栏位</div>
|
|
|
- </el-popover> -->
|
|
|
-
|
|
|
- <div @click="hover(item)" class="check" style="min-width: 120px;min-height: 30px;background: rgb(235, 235, 168);position: relative;" >
|
|
|
- <div style="text-align: center;">已选择的栏位 <i class="el-icon-arrow-down"></i></div>
|
|
|
- <div class="checkSon">
|
|
|
- <div v-for="checks in dataShow.filter(showItem => { return showItem.type == item.type })"
|
|
|
- :key="checks.id">
|
|
|
- <span>{{ checks.name }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <el-tooltip class="item" effect="dark" content="显示栏位的值" placement="top">
|
|
|
- <el-button @click="showClick(item)" type="primary" size="small" style="margin-left: 10px;">{{ '显示'
|
|
|
- }}</el-button>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- 数字、日期、文字 -->
|
|
|
- <template v-if="item.type === 0 || item.type === 2 || item.type === 1">
|
|
|
- <div class="custom-input">
|
|
|
- <el-date-picker v-if="item.type === 1" value-format="yyyy-MM-dd" type="date" size="small"
|
|
|
- placeholder="选择日期" class="width_100" @change="onChange(item, val)"></el-date-picker>
|
|
|
- <el-input v-else type="textarea" placeholder="请输入内容" size="small"
|
|
|
- @blur="onChange(item, val)"></el-input>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- 单选 -->
|
|
|
- <div v-if="item.type == 4 && show.field1">
|
|
|
- <el-radio v-for="radio in item.options" :key="radio.id" :label="radio.id" style="width: 100%;">
|
|
|
- <span>{{ radio.name }}</span>
|
|
|
- </el-radio>
|
|
|
+ <div class="patent-articles-patent-field" style="width:300px">
|
|
|
+ <el-form label-position="top" class="custom-field-form">
|
|
|
+ <template v-for="(item, index) in customField">
|
|
|
+ <el-form-item :key="index">
|
|
|
+ <template slot="label">
|
|
|
+ <span :title="item.name" class="name">{{ item.name }}</span>
|
|
|
+ </template>
|
|
|
+ <div class="option">
|
|
|
+ <el-dropdown size="small">
|
|
|
+ <span class="el-dropdown-link">
|
|
|
+ <i class="el-icon-more el-icon--right"></i>
|
|
|
+ </span>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item @click.native="handleOption(0, item.id, index)">上移</el-dropdown-item>
|
|
|
+ <el-dropdown-item @click.native="handleOption(1, item.id, index)">下移</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ <template v-if="item.type === 0 || item.type === 2 || item.type === 1">
|
|
|
+ <div v-for="(val, i) in selected[item.id]" class="custom-input">
|
|
|
+ <el-date-picker v-if="item.type === 1" v-model="val.label" value-format="yyyy-MM-dd" type="date" size="small" placeholder="选择日期" class="width_100" @change="onChange($event, item, val)"></el-date-picker>
|
|
|
+ <el-input v-else type="textarea" v-model="val.label" placeholder="请输入内容" size="small" @blur="onChange($event, item, val)"></el-input>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.type === 4">
|
|
|
+ <div class="showValue">
|
|
|
+ <div>
|
|
|
+ <div v-for="fieldValue in item.selected" :key="fieldValue" class="value">{{ fieldValue.name }}</div>
|
|
|
+ </div>
|
|
|
+ <el-button size="small" @click="$set(item,'show',!item.show)">{{ item.show?'收起':'修改' }}</el-button>
|
|
|
+ </div>
|
|
|
+ <el-radio-group v-model="item.selectedId" @change="onChange($event, item)" v-show="item.show">
|
|
|
+ <div v-for="option in item.option">
|
|
|
+ <el-radio class="custom-radio" :label="option.id" @click.native.prevent="getSelect(item,option.id)">{{ option.name }}</el-radio>
|
|
|
+ </div>
|
|
|
+ </el-radio-group>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.type === 5">
|
|
|
+ <div class="showValue">
|
|
|
+ <div>
|
|
|
+ <div v-for="fieldValue in item.selected" :key="fieldValue" class="value">{{ fieldValue }}</div>
|
|
|
</div>
|
|
|
- <!-- 多选 -->
|
|
|
- <el-checkbox-group v-if="item.type == 5 && show.field2">
|
|
|
- <div class="source-checkbox">
|
|
|
- <el-checkbox v-for="source in item.options" :label="source.id" :key="source.id">
|
|
|
- <span class="source-checkbox-label">{{ source.name }}</span>
|
|
|
- </el-checkbox>
|
|
|
- </div>
|
|
|
- </el-checkbox-group>
|
|
|
- <!-- 树类型 -->
|
|
|
- <el-tree v-if="item.type == 6 && show.field3" @check-change="onChangeTree($event, item.id)" :ref="item.id"
|
|
|
- :data="item.child" show-checkbox node-key="id" check-strictly :default-expand-all="false"
|
|
|
- :props="{ children: 'child', label: 'name' }">
|
|
|
- <div class="custom-filter-tree-node" slot-scope="{ node, data }">
|
|
|
- <span class="name">{{ data.name }}</span>
|
|
|
- </div>
|
|
|
- </el-tree>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </template>
|
|
|
- </el-main>
|
|
|
- </el-container>
|
|
|
+ <el-button size="small" @click="$set(item,'show',!item.show)">{{ item.show?'收起':'修改' }}</el-button>
|
|
|
+ </div>
|
|
|
+ <el-checkbox-group v-model="selected[item.id]" @change="onChange($event, item)" v-show="item.show">
|
|
|
+ <el-checkbox class="custom-checkbox" v-for="option in item.option" :label="option.id">{{ option.name }}</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.type === 6" >
|
|
|
+ <div class="showValue">
|
|
|
+ <div>
|
|
|
+ <div v-for="fieldValue in item.selected" :key="fieldValue" class="value">{{ fieldValue }}</div>
|
|
|
+ </div>
|
|
|
+ <el-button size="small" @click="$set(item,'show',!item.show)">{{ item.show?'收起':'修改' }}</el-button>
|
|
|
+ </div>
|
|
|
+ <div v-show="item.show">
|
|
|
+ <el-tree
|
|
|
+ @check-change="onChange($event, item)"
|
|
|
+ :ref="item.id"
|
|
|
+ :data="item.option"
|
|
|
+ check-strictly
|
|
|
+ :default-checked-keys="selected[item.id]"
|
|
|
+ show-checkbox
|
|
|
+ node-key="id"
|
|
|
+ default-expand-all
|
|
|
+ :props="defaultProps"
|
|
|
+ ></el-tree>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
+ props: {
|
|
|
+ projectId:{
|
|
|
+ default:0
|
|
|
+ },
|
|
|
+ taskId:{
|
|
|
+ default:0
|
|
|
+ },
|
|
|
+ patentNo:''
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
- field: [],
|
|
|
- // 控制栏位值的显示
|
|
|
- show: {
|
|
|
- field1: false,
|
|
|
- field2: false,
|
|
|
- field3: false,
|
|
|
- },
|
|
|
- // 显示已选择的数据
|
|
|
- dataShow: []
|
|
|
+ customField:[],
|
|
|
+ selected:[],
|
|
|
+ defaultProps:{
|
|
|
+ children:'child'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ patentNo(){
|
|
|
+ this.getOptionsAndSelected()
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.getList()
|
|
|
+ this.getCustomField()
|
|
|
},
|
|
|
- methods: {
|
|
|
- hover(row) {
|
|
|
- let divCheckSon = document.querySelector('.checkSon')
|
|
|
- divCheckSon.classList.add('Checked')
|
|
|
- },
|
|
|
- // 显示自定义栏位
|
|
|
- showClick(row) {
|
|
|
- switch (row.type) {
|
|
|
- case 4:
|
|
|
- this.show.field1 = !this.show.field1
|
|
|
- break;
|
|
|
- case 5:
|
|
|
- this.show.field2 = !this.show.field2
|
|
|
- break;
|
|
|
- case 6:
|
|
|
- this.show.field3 = !this.show.field3
|
|
|
- break;
|
|
|
+ methods:{
|
|
|
+ //上移下移
|
|
|
+ handleOption(type,id,index){
|
|
|
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
},
|
|
|
- onChangeTree(val) {
|
|
|
- console.log(val);
|
|
|
- let obj = {
|
|
|
- name: val.name,
|
|
|
- id: val.id,
|
|
|
- type: val.type
|
|
|
- }
|
|
|
- if (this.dataShow.length>0) {
|
|
|
- let index = this.dataShow.forEach(item => {
|
|
|
- return item.id == val.id
|
|
|
- })
|
|
|
- if (index!=-1) {
|
|
|
-
|
|
|
- } else {
|
|
|
- this.dataShow.push(obj)
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.dataShow.push(obj)
|
|
|
- }
|
|
|
-
|
|
|
+ //切换选择
|
|
|
+ onChange(){
|
|
|
+
|
|
|
},
|
|
|
- // 查询自定义栏位数据
|
|
|
- getList() {
|
|
|
+ getCustomField(){
|
|
|
var params = {
|
|
|
- current: 1,
|
|
|
- size: 10,
|
|
|
- searchQuery: `projectId=${101}`,
|
|
|
- orderDTOList: [],
|
|
|
+ projectId:this.projectId,
|
|
|
+ taskId:this.taskId
|
|
|
}
|
|
|
- this.$api.queryCustomField(params).then(response => {
|
|
|
- if (response.code == 200) {
|
|
|
- let data = response.data.data
|
|
|
- this.handleFiled(data)
|
|
|
+ this.$api.getAllPatentCustomField(params).then(response=>{
|
|
|
+ if(response.code == 200){
|
|
|
+ this.customField = response.data
|
|
|
+ // this.getOptionsAndSelected()
|
|
|
}
|
|
|
- }).catch(error => {
|
|
|
- this.loading = false
|
|
|
+ }).catch(error=>{
|
|
|
+ this.customField = [
|
|
|
+ {
|
|
|
+ "id": 10,
|
|
|
+ "name": "相似度",
|
|
|
+ "projectId": 101,
|
|
|
+ "type": 6,
|
|
|
+ "description": "",
|
|
|
+ "status": true,
|
|
|
+ "createId": "328",
|
|
|
+ "createName": "朱豪",
|
|
|
+ "createTime": "2023-12-15 14:52:42"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": 11,
|
|
|
+ "name": "多选",
|
|
|
+ "projectId": 101,
|
|
|
+ "type": 5,
|
|
|
+ "description": "",
|
|
|
+ "status": true,
|
|
|
+ "createId": "328",
|
|
|
+ "createName": "朱豪",
|
|
|
+ "createTime": "2023-12-15 14:54:03"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": 12,
|
|
|
+ "name": "单选",
|
|
|
+ "projectId": 101,
|
|
|
+ "type": 4,
|
|
|
+ "description": "",
|
|
|
+ "status": true,
|
|
|
+ "createId": "328",
|
|
|
+ "createName": "朱豪",
|
|
|
+ "createTime": "2023-12-15 14:54:29",
|
|
|
+ selected:[
|
|
|
+ {
|
|
|
+ id:1,
|
|
|
+ name:'选项'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ selectedId:1,
|
|
|
+ option:[
|
|
|
+ {
|
|
|
+ id:1,
|
|
|
+ name:'选项'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": 13,
|
|
|
+ "name": "文本",
|
|
|
+ "projectId": 101,
|
|
|
+ "type": 2,
|
|
|
+ "description": "",
|
|
|
+ "status": true,
|
|
|
+ "createId": "328",
|
|
|
+ "createName": "朱豪",
|
|
|
+ "createTime": "2023-12-15 14:54:51"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": 14,
|
|
|
+ "name": "日期",
|
|
|
+ "projectId": 101,
|
|
|
+ "type": 1,
|
|
|
+ "description": "",
|
|
|
+ "status": true,
|
|
|
+ "createId": "328",
|
|
|
+ "createName": "朱豪",
|
|
|
+ "createTime": "2023-12-15 14:54:57"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": 15,
|
|
|
+ "name": "数字",
|
|
|
+ "projectId": 101,
|
|
|
+ "type": 0,
|
|
|
+ "description": "",
|
|
|
+ "status": true,
|
|
|
+ "createId": "328",
|
|
|
+ "createName": "朱豪",
|
|
|
+ "createTime": "2023-12-15 14:55:03"
|
|
|
+ }
|
|
|
+ ]
|
|
|
})
|
|
|
},
|
|
|
- handleFiled(data) {
|
|
|
- data.forEach(item => {
|
|
|
- this.queryCustomOption(item)
|
|
|
+ //获取栏位的选项和选项值(0数字,1日期,2文本,4单选,5多选,6树,7产品8产品类别9技术分类)
|
|
|
+ getOptionsAndSelected(){
|
|
|
+ this.customField.forEach(item => {
|
|
|
+ this.getSelected(item)
|
|
|
+ switch(item.type){
|
|
|
+ case 4:
|
|
|
+ case 5:
|
|
|
+ case 6:
|
|
|
+ this.getCustomOption(item)
|
|
|
+ break;
|
|
|
+ case 7:
|
|
|
+ break;
|
|
|
+ case 8:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获取选项值
|
|
|
+ getSelected(item){
|
|
|
+ this.$api.getCustomFieldValues().then(response=>{
|
|
|
+ if(response.code == 200){
|
|
|
+ item.selected = response.data
|
|
|
+ }
|
|
|
+ }).catch(error=>{
|
|
|
+ item.selected = []
|
|
|
})
|
|
|
},
|
|
|
- // 查询自定义栏位选项数据
|
|
|
- queryCustomOption(row) {
|
|
|
-
|
|
|
- let params = {
|
|
|
- customFieldId: row.id,
|
|
|
+ //查询自定义栏位选项
|
|
|
+ getCustomOption(item){
|
|
|
+ var params = {
|
|
|
+ customFieldId:item.id
|
|
|
}
|
|
|
- this.$api.queryCustomOption(params).then(response => {
|
|
|
- if (response.code == 200) {
|
|
|
- if (row.type == 6) {//树类型
|
|
|
- row.child = response.data.data
|
|
|
- } else if (row.type == 5) {
|
|
|
- row.options = response.data.data
|
|
|
- } else if (row.type == 4) {
|
|
|
- row.options = response.data.data
|
|
|
- }
|
|
|
- this.field.push(row)
|
|
|
+ this.$api.queryCustomOption(params).then(response=>{
|
|
|
+ if(response.code == 200){
|
|
|
+ this.$set(item, 'option', response.data.data)
|
|
|
}
|
|
|
- }).catch(error => {
|
|
|
-
|
|
|
+ }).catch(error=>{
|
|
|
+ this.$set(item, 'option', [])
|
|
|
})
|
|
|
},
|
|
|
- },
|
|
|
-}
|
|
|
-</script>
|
|
|
+ //获取产品或产品类别架构
|
|
|
+ getProductCategory(){
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
-.PatentField {
|
|
|
- .Checked{
|
|
|
- min-width: 120px;
|
|
|
- min-height: 30px;
|
|
|
- background: rgb(235, 235, 168);
|
|
|
- position: absolute;
|
|
|
- top: 45px;
|
|
|
- left: 0px;
|
|
|
- z-index: 10;
|
|
|
- }
|
|
|
- .name {
|
|
|
- display: block;
|
|
|
- width: 170px;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
-
|
|
|
- .option {
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: -50px;
|
|
|
- color: #1e9fff;
|
|
|
-
|
|
|
- i {
|
|
|
- cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
+</script>
|
|
|
|
|
|
- .el-form-item {
|
|
|
- margin-bottom: 0 !important;
|
|
|
-
|
|
|
- .el-form-item__label {
|
|
|
- font-size: 16px;
|
|
|
- border-bottom: 1px solid #d2d2d2;
|
|
|
+<style lang="scss">
|
|
|
+.patent-articles-patent-field {
|
|
|
+ .custom-field-form {
|
|
|
+ .name {
|
|
|
+ display: block;
|
|
|
+ width: 170px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .option {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: -50px;
|
|
|
+ color: #1e9fff;
|
|
|
+ i {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 0 !important;
|
|
|
+ .el-form-item__label {
|
|
|
+ font-size: 16px;
|
|
|
+ border-bottom: 1px solid #d2d2d2;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ color: #EE6666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .custom-input {
|
|
|
margin-bottom: 10px;
|
|
|
- color: #EE6666;
|
|
|
+ .el-input {
|
|
|
+ }
|
|
|
+ .el-button {
|
|
|
+ float: right;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .custom-input {
|
|
|
- margin-bottom: 10px;
|
|
|
-
|
|
|
- .el-button {
|
|
|
- float: right;
|
|
|
- margin-top: 5px;
|
|
|
+ .custom-checkbox, .custom-radio {
|
|
|
+ width: 100%;
|
|
|
+ margin-right: 0 !important;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ .el-form-item__label {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 !important;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .custom-checkbox,
|
|
|
- .custom-radio {
|
|
|
- width: 100%;
|
|
|
- margin-right: 0 !important;
|
|
|
- line-height: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- .el-form-item__label {
|
|
|
- width: 100%;
|
|
|
- padding: 0 !important;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .showValue{
|
|
|
+ width:100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ &>div{
|
|
|
+ width:100%;
|
|
|
+ min-height: 30px;
|
|
|
+ border:1px solid var(--color1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .value{
|
|
|
+
|
|
|
+ padding:5px;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
-}</style>
|
|
|
+</style>
|