|
@@ -0,0 +1,274 @@
|
|
|
+<script>
|
|
|
+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,
|
|
|
+ },
|
|
|
+ candidate:{
|
|
|
+ type:[Array],
|
|
|
+ require:true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+ ElDraggable: () => import("@/components/draggable/index.vue"),
|
|
|
+ ElFileUpload: () => import("@/components/FileUpload/index.vue"),
|
|
|
+ ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
|
|
|
+ ElPopoverMultipleSelectV2: () =>
|
|
|
+ import("@/components/popover-select-v2/multiple.vue"),
|
|
|
+ ElPopoverTreeSelect: () =>
|
|
|
+ import("@/components/popover-tree-select/index.vue"),
|
|
|
+ ElPopoverMultipleTreeSelect: () =>
|
|
|
+ import("@/components/popover-tree-select/multiple.vue"),
|
|
|
+ ElDateWrapper: () => import("@/components/date-wrapper/index.vue"),
|
|
|
+
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ innerValue:{
|
|
|
+ get(){
|
|
|
+ return this.$props.value;
|
|
|
+ },
|
|
|
+ set(value){
|
|
|
+ this.$emit("input",value);
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ showColumns:Columns,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+
|
|
|
+ // 增
|
|
|
+ onRowAdd(){
|
|
|
+
|
|
|
+ this.innerValue.push({
|
|
|
+ ...this.$init.params([...this.showColumns]),
|
|
|
+ attr: {
|
|
|
+ is: 'el-input'
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 删
|
|
|
+ onRowRemove(prop){
|
|
|
+ console.log(prop,'prop');
|
|
|
+ const { $index, row } = prop;
|
|
|
+ this.innerValue.splice($index,1)
|
|
|
+ },
|
|
|
+ // 条件选择
|
|
|
+ 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');
|
|
|
+
|
|
|
+ // 方案存储
|
|
|
+ this.innerValue = this.innerValue.map((tableItem,index) =>{
|
|
|
+
|
|
|
+ if(row.candidate === tableItem.candidate && $index === index){
|
|
|
+
|
|
|
+ tableItem.options = '';
|
|
|
+
|
|
|
+ tableItem.value = '';
|
|
|
+
|
|
|
+ tableItem.operators = operators;
|
|
|
+
|
|
|
+ tableItem.attr = attr
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ return tableItem
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ // 值框的选择
|
|
|
+ // this.showColumns = this.showColumns
|
|
|
+
|
|
|
+ },
|
|
|
+ // 操作选择
|
|
|
+ optionChange(prop){
|
|
|
+ console.log(prop,'prop');
|
|
|
+ // this.$emit("update:value",this.innerValue);
|
|
|
+ },
|
|
|
+ judgeOperatorType(type){
|
|
|
+
|
|
|
+ switch (type.is) {
|
|
|
+
|
|
|
+ case 'el-popover-multiple-select-v2':
|
|
|
+ return 'array';
|
|
|
+
|
|
|
+ case 'el-popover-multiple-tree-select':
|
|
|
+ return 'array';
|
|
|
+
|
|
|
+ case 'el-input-number':
|
|
|
+ return 'number';
|
|
|
+
|
|
|
+ case 'el-date-picker':
|
|
|
+ return 'datetime';
|
|
|
+
|
|
|
+ case 'el-select':
|
|
|
+ let dictName = type.dictName;
|
|
|
+ if(dictName === 'sys_number_yes_no'
|
|
|
+ || dictName === 'sys_yes_no'
|
|
|
+ || dictName === 'sys_true_false' ){
|
|
|
+ return 'boolean';
|
|
|
+ }
|
|
|
+ return 'string';
|
|
|
+
|
|
|
+ default:
|
|
|
+ return 'string';
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <el-main>
|
|
|
+ <el-table
|
|
|
+ :data="innerValue"
|
|
|
+ style="width: 100%"
|
|
|
+ :show-header="false"
|
|
|
+ :height="320"
|
|
|
+ empty-text=" "
|
|
|
+ v-bind="$attrs"
|
|
|
+ v-on="$listeners"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ v-for="({item,attr},index) in showColumns"
|
|
|
+ :key="item.key + index"
|
|
|
+ :prop="item.key"
|
|
|
+ :label="item.title"
|
|
|
+ :fixed="item.fixed"
|
|
|
+ :width="item.width || 200"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+
|
|
|
+ <el-select
|
|
|
+ v-if="item.key === 'candidate'"
|
|
|
+ v-model="scope.row[item.key]"
|
|
|
+ :size="$attrs.size"
|
|
|
+ filterable
|
|
|
+ placeholder="请选择"
|
|
|
+ @change="canidateChange(scope)"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(c, index) in candidate"
|
|
|
+ :key="index + c.item.key"
|
|
|
+ :label="c.item.title"
|
|
|
+ :value="c.item.key"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <el-select
|
|
|
+ v-if="item.key === 'options'"
|
|
|
+ v-model="scope.row[item.key]"
|
|
|
+ :size="$attrs.size"
|
|
|
+ placeholder="请选择"
|
|
|
+ @change="optionChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="op in scope.row['operators']"
|
|
|
+ :key="op.value"
|
|
|
+ :label="op.label"
|
|
|
+ :value="op.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <template v-if="item.key === 'value'">
|
|
|
+ <component
|
|
|
+ v-if="scope.row.attr.is === 'el-select'"
|
|
|
+ v-bind="scope.row.attr"
|
|
|
+ :size="$attrs.size"
|
|
|
+ v-model="scope.row[item.key]"
|
|
|
+ >
|
|
|
+ <template>
|
|
|
+ <el-option
|
|
|
+ v-for="item in dict.type[attr.dictName]"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </template>
|
|
|
+ </component>
|
|
|
+ <component
|
|
|
+ v-else-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
|
|
|
+ v-bind="scope.row.attr"
|
|
|
+ :size="$attrs.size"
|
|
|
+ v-model="scope.row[item.key]"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ </component>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="50">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <i class="el-icon-delete"
|
|
|
+ @click.prevent="onRowRemove(scope)"
|
|
|
+ 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"
|
|
|
+ >
|
|
|
+ <i class="el-icon-plus"></i>
|
|
|
+ 新增筛选条件
|
|
|
+ </el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-main>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+::v-deep.el-table::before{
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep.el-table {
|
|
|
+
|
|
|
+ th,td,th.is-leaf{
|
|
|
+ border:none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-table__cell{
|
|
|
+ padding: 2px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|