|
|
@@ -1,20 +1,20 @@
|
|
|
<script>
|
|
|
-import { getOperators } from './operators';
|
|
|
-import { Columns } from '../colums';
|
|
|
-import { getDicts as getDicts } from '@/api/system/dict/data'
|
|
|
+import { getOperators } from "./operators";
|
|
|
+import { Columns } from "../colums";
|
|
|
+import { getDicts as getDicts } from "@/api/system/dict/data";
|
|
|
export default {
|
|
|
- name:'Sizer',
|
|
|
- props:{
|
|
|
- value:{
|
|
|
- type:[Array],
|
|
|
- require:true,
|
|
|
+ name: "Sizer",
|
|
|
+ props: {
|
|
|
+ value: {
|
|
|
+ type: [Array],
|
|
|
+ require: true,
|
|
|
},
|
|
|
- candidate:{
|
|
|
- type:[Array],
|
|
|
- require:true,
|
|
|
+ candidate: {
|
|
|
+ type: [Array],
|
|
|
+ require: true,
|
|
|
},
|
|
|
},
|
|
|
- components:{
|
|
|
+ components: {
|
|
|
ElDraggable: () => import("@/components/draggable/index.vue"),
|
|
|
ElFileUpload: () => import("@/components/FileUpload/index.vue"),
|
|
|
ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
|
|
|
@@ -25,115 +25,108 @@ export default {
|
|
|
ElPopoverMultipleTreeSelect: () =>
|
|
|
import("@/components/popover-tree-select/multiple.vue"),
|
|
|
ElDateWrapper: () => import("@/components/date-wrapper/index.vue"),
|
|
|
-
|
|
|
},
|
|
|
- computed:{
|
|
|
- innerValue:{
|
|
|
- get(){
|
|
|
+ computed: {
|
|
|
+ innerValue: {
|
|
|
+ get() {
|
|
|
return this.$props.value;
|
|
|
},
|
|
|
- set(value){
|
|
|
- this.$emit("input",value);
|
|
|
+ set(value) {
|
|
|
+ this.$emit("input", value);
|
|
|
},
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
- data(){
|
|
|
+ data() {
|
|
|
return {
|
|
|
- showColumns:Columns,
|
|
|
- }
|
|
|
+ showColumns: Columns,
|
|
|
+ };
|
|
|
},
|
|
|
- methods:{
|
|
|
-
|
|
|
+ methods: {
|
|
|
// 增
|
|
|
- onRowAdd(){
|
|
|
-
|
|
|
+ onRowAdd() {
|
|
|
this.innerValue.push({
|
|
|
- ...this.$init.params([...this.showColumns]),
|
|
|
- attr: {
|
|
|
- is: 'el-input'
|
|
|
- }
|
|
|
+ ...this.$init.params([...this.showColumns]),
|
|
|
+ attr: {
|
|
|
+ is: "el-input",
|
|
|
+ },
|
|
|
});
|
|
|
},
|
|
|
// 删
|
|
|
- onRowRemove(prop){
|
|
|
- console.log(prop,'prop');
|
|
|
+ onRowRemove(prop) {
|
|
|
+ console.log(prop, "prop");
|
|
|
const { $index, row } = prop;
|
|
|
- this.innerValue.splice($index,1)
|
|
|
+ this.innerValue.splice($index, 1);
|
|
|
},
|
|
|
// 条件选择
|
|
|
- canidateChange(prop){
|
|
|
-
|
|
|
- let {$index, row} = prop;
|
|
|
+ canidateChange(prop) {
|
|
|
+ let { $index, row } = prop;
|
|
|
|
|
|
- let selectValue = this.candidate.filter(({item}) => item.key === row.candidate)[0];
|
|
|
-
|
|
|
- let operators = selectValue ? getOperators(this.judgeOperatorType(selectValue.attr)) : [];
|
|
|
-
|
|
|
- let attr = selectValue.attr ? selectValue.attr : { is: 'el-input'};
|
|
|
- console.log(attr.is,'attr');
|
|
|
+ let selectValue = this.candidate.filter(
|
|
|
+ ({ item }) => item.key === row.candidate
|
|
|
+ )[0];
|
|
|
|
|
|
- // 方案存储
|
|
|
- this.innerValue = this.innerValue.map((tableItem,index) =>{
|
|
|
+ let operators = selectValue
|
|
|
+ ? getOperators(this.judgeOperatorType(selectValue.attr))
|
|
|
+ : [];
|
|
|
|
|
|
- if(row.candidate === tableItem.candidate && $index === index){
|
|
|
+ let attr = selectValue.attr ? selectValue.attr : { is: "el-input" };
|
|
|
+ console.log(attr.is, "attr");
|
|
|
|
|
|
- tableItem.options = '';
|
|
|
+ // 方案存储
|
|
|
+ this.innerValue = this.innerValue.map((tableItem, index) => {
|
|
|
+ if (row.candidate === tableItem.candidate && $index === index) {
|
|
|
+ tableItem.options = "";
|
|
|
|
|
|
- tableItem.value = '';
|
|
|
+ tableItem.value = "";
|
|
|
|
|
|
tableItem.operators = operators;
|
|
|
|
|
|
- tableItem.attr = attr
|
|
|
-
|
|
|
+ tableItem.attr = attr;
|
|
|
}
|
|
|
|
|
|
- return tableItem
|
|
|
-
|
|
|
- })
|
|
|
+ return tableItem;
|
|
|
+ });
|
|
|
|
|
|
// 值框的选择
|
|
|
// this.showColumns = this.showColumns
|
|
|
-
|
|
|
},
|
|
|
// 操作选择
|
|
|
- optionChange(prop){
|
|
|
- console.log(prop,'prop');
|
|
|
+ optionChange(prop) {
|
|
|
+ console.log(prop, "prop");
|
|
|
// this.$emit("update:value",this.innerValue);
|
|
|
},
|
|
|
- judgeOperatorType(type){
|
|
|
-
|
|
|
+ judgeOperatorType(type) {
|
|
|
switch (type.is) {
|
|
|
+ case "el-popover-multiple-select-v2":
|
|
|
+ return "array";
|
|
|
|
|
|
- case 'el-popover-multiple-select-v2':
|
|
|
- return 'array';
|
|
|
-
|
|
|
- case 'el-popover-multiple-tree-select':
|
|
|
- return 'array';
|
|
|
+ case "el-popover-multiple-tree-select":
|
|
|
+ return "array";
|
|
|
|
|
|
- case 'el-input-number':
|
|
|
- return 'number';
|
|
|
+ case "el-input-number":
|
|
|
+ return "number";
|
|
|
|
|
|
- case 'el-date-picker':
|
|
|
- return 'datetime';
|
|
|
+ case "el-date-picker":
|
|
|
+ return "datetime";
|
|
|
|
|
|
- case 'el-select':
|
|
|
+ case "el-select":
|
|
|
let dictName = type.dictName;
|
|
|
- if(dictName === 'sys_number_yes_no'
|
|
|
- || dictName === 'sys_yes_no'
|
|
|
- || dictName === 'sys_true_false' ){
|
|
|
- return 'boolean';
|
|
|
+ if (
|
|
|
+ dictName === "sys_number_yes_no" ||
|
|
|
+ dictName === "sys_yes_no" ||
|
|
|
+ dictName === "sys_true_false"
|
|
|
+ ) {
|
|
|
+ return "boolean";
|
|
|
}
|
|
|
- return 'string';
|
|
|
+ return "string";
|
|
|
|
|
|
default:
|
|
|
- return 'string';
|
|
|
-
|
|
|
- }
|
|
|
+ return "string";
|
|
|
+ }
|
|
|
},
|
|
|
},
|
|
|
- created(){
|
|
|
- }
|
|
|
-}
|
|
|
+ created() {},
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
@@ -147,8 +140,8 @@ export default {
|
|
|
v-bind="$attrs"
|
|
|
v-on="$listeners"
|
|
|
>
|
|
|
- <el-table-column
|
|
|
- v-for="({item,attr},index) in showColumns"
|
|
|
+ <el-table-column
|
|
|
+ v-for="({ item, attr }, index) in showColumns"
|
|
|
:key="item.key + index"
|
|
|
:prop="item.key"
|
|
|
:label="item.title"
|
|
|
@@ -157,10 +150,9 @@ export default {
|
|
|
show-overflow-tooltip
|
|
|
>
|
|
|
<template slot-scope="scope">
|
|
|
-
|
|
|
- <el-select
|
|
|
+ <el-select
|
|
|
v-if="item.key === 'candidate'"
|
|
|
- v-model="scope.row[item.key]"
|
|
|
+ v-model="scope.row[item.key]"
|
|
|
:size="$attrs.size"
|
|
|
filterable
|
|
|
placeholder="请选择"
|
|
|
@@ -174,9 +166,9 @@ export default {
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
|
|
|
- <el-select
|
|
|
+ <el-select
|
|
|
v-if="item.key === 'options'"
|
|
|
- v-model="scope.row[item.key]"
|
|
|
+ v-model="scope.row[item.key]"
|
|
|
:size="$attrs.size"
|
|
|
placeholder="请选择"
|
|
|
@change="optionChange"
|
|
|
@@ -185,10 +177,11 @@ export default {
|
|
|
v-for="op in scope.row['operators']"
|
|
|
:key="op.value"
|
|
|
:label="op.label"
|
|
|
- :value="op.value">
|
|
|
+ :value="op.value"
|
|
|
+ >
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
-
|
|
|
+
|
|
|
<template v-if="item.key === 'value'">
|
|
|
<component
|
|
|
v-if="scope.row.attr.is === 'el-select'"
|
|
|
@@ -206,18 +199,60 @@ export default {
|
|
|
</el-option>
|
|
|
</template>
|
|
|
</component>
|
|
|
+
|
|
|
+ <component
|
|
|
+ v-if="scope.row.attr.is === 'el-popover-select-v2'"
|
|
|
+ v-bind="scope.row.attr"
|
|
|
+ v-model="scope.row[item.key]"
|
|
|
+ :title="item.title"
|
|
|
+ :size="$attrs.size"
|
|
|
+ :source.sync="scope.row"
|
|
|
+ style="width: 100%"
|
|
|
+ ></component>
|
|
|
+
|
|
|
<component
|
|
|
- v-else-if="scope.row.attr.is === 'el-popover-select-v2'"
|
|
|
+ v-if="scope.row.attr.is === 'el-popover-multiple-select-v2'"
|
|
|
v-bind="scope.row.attr"
|
|
|
v-model="scope.row[item.key]"
|
|
|
:title="item.title"
|
|
|
:size="$attrs.size"
|
|
|
:source.sync="scope.row"
|
|
|
style="width: 100%"
|
|
|
+ ></component>
|
|
|
+
|
|
|
+ <component
|
|
|
+ v-if="scope.row.attr.is === 'el-popover-tree-select'"
|
|
|
+ v-bind="scope.row.attr"
|
|
|
+ v-model="scope.row[item.key]"
|
|
|
+ :size="$attrs.size"
|
|
|
+ :source.sync="scope.row"
|
|
|
+ @change="$emit('submit')"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ </component>
|
|
|
+
|
|
|
+ <component
|
|
|
+ v-if="scope.row.attr.is === 'el-popover-multiple-tree-select'"
|
|
|
+ v-bind="scope.row.attr"
|
|
|
+ v-model="scope.row[item.key]"
|
|
|
+ :size="$attrs.size"
|
|
|
+ :source.sync="scope.row"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ </component>
|
|
|
+
|
|
|
+ <component
|
|
|
+ v-if="scope.row.attr.is === 'el-date-wrapper'"
|
|
|
+ v-bind="scope.row.attr"
|
|
|
+ v-model="scope.row[item.key]"
|
|
|
+ :size="$attrs.size"
|
|
|
+ :source.sync="scope.row"
|
|
|
+ style="width: 100%"
|
|
|
>
|
|
|
</component>
|
|
|
+
|
|
|
<component
|
|
|
- v-else
|
|
|
+ v-if="scope.row.attr.is === 'el-input'"
|
|
|
v-bind="scope.row.attr"
|
|
|
:size="$attrs.size"
|
|
|
v-model="scope.row[item.key]"
|
|
|
@@ -225,50 +260,55 @@ export default {
|
|
|
>
|
|
|
</component>
|
|
|
</template>
|
|
|
-
|
|
|
</template>
|
|
|
-
|
|
|
-
|
|
|
</el-table-column>
|
|
|
<el-table-column label="操作" width="50">
|
|
|
<template slot-scope="scope">
|
|
|
- <i class="el-icon-delete"
|
|
|
+ <i
|
|
|
+ class="el-icon-delete"
|
|
|
@click.prevent="onRowRemove(scope)"
|
|
|
- style="cursor: pointer;"
|
|
|
+ style="cursor: pointer"
|
|
|
></i>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
<el-row>
|
|
|
- <el-col style="padding-left: 10px;">
|
|
|
- <el-button
|
|
|
- type="text"
|
|
|
- @click.native.prevent="onRowAdd"
|
|
|
- >
|
|
|
+ <el-col style="padding-left: 10px">
|
|
|
+ <el-button type="text" @click.native.prevent="onRowAdd">
|
|
|
<i class="el-icon-plus"></i>
|
|
|
新增筛选条件
|
|
|
</el-button>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-main>
|
|
|
-
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-::v-deep.el-table::before{
|
|
|
+::v-deep.el-table::before {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
::v-deep.el-table {
|
|
|
-
|
|
|
- th,td,th.is-leaf{
|
|
|
- border:none;
|
|
|
+ th,
|
|
|
+ td,
|
|
|
+ th.is-leaf {
|
|
|
+ border: none;
|
|
|
}
|
|
|
|
|
|
- .el-table__cell{
|
|
|
+ .el-table__cell {
|
|
|
padding: 2px 0;
|
|
|
}
|
|
|
+ .popover-select-v2 .popover-select-v2_tags,
|
|
|
+ .popover-tree-select .popover-tree-select_tags {
|
|
|
+ left: 15px;
|
|
|
+ }
|
|
|
+ .el-scrollbar__view {
|
|
|
+ padding: 6px 0 0 3px !important;
|
|
|
+ }
|
|
|
|
|
|
+ .el-scrollbar__wrap {
|
|
|
+ overflow-x: hidden;
|
|
|
+ margin-right: -2px !important;
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
-</style>
|
|
|
+</style>
|
002390