schangxiang@126.com
2025-09-10 3d43ffa3152110b7823f9fa6320c08a6ae02358a
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<template>
  <li v-if="element && element.key" :class="{active: selectWidget && selectWidget.key == element.key}" class="item" @click.stop="handleSelectWidget(index)">
    <i class="handle el-icon-yrt-yidong1"></i>
    <span>{{ element.label }}</span>
    <el-button v-if="selectWidget && selectWidget.key == element.key" type="text" title="删除" size="mini" @click.stop="handleWidgetDelete(index)">
      <i class="el-icon-yrt-shanchu2"></i>
    </el-button>
    <el-button v-if="selectWidget && selectWidget.key == element.key" type="text" title="复制" size="mini" @click.stop="handleWidgetClone(index)">
      <i class="el-icon-yrt-fuzhi4"></i>
    </el-button>
    <div class="right-tool">
      <el-input v-model="element.searchRowNo" placeholder="查询顺序(大于0显示)" class="w-100" size="mini"></el-input>
      <el-switch v-model="element.hidden" :active-value="false" :inactive-value="true" active-text="显示" inactive-text="隐藏">
      </el-switch>
    </div>
  </li>
</template>
 
<script>
import FmUpload from "./Upload";
export default {
  components: {
    FmUpload
  },
  props: {
    element: {
      type: Object,
      default: () => {
        return {};
      }
    },
    select: {
      type: Object,
      default: () => {
        return {};
      }
    },
    index: {
      type: Number,
      default: null
    },
    fields: {
      type: Array,
      default: () => {
        return [];
      }
    },
    configType: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      selectWidget: this.select
    };
  },
  watch: {
    select(val) {
      this.selectWidget = val;
    },
    selectWidget: {
      handler(val) {
        this.$emit("update:select", val);
      },
      deep: true
    }
  },
  methods: {
    handleSelectWidget(index) {
      this.selectWidget = this.fields[index];
      this.$emit("update:configType", "ManagerConfig");
    },
    handleWidgetDelete(index) {
      if (this.fields.length - 1 === index) {
        if (index === 0) {
          this.selectWidget = {};
        } else {
          this.selectWidget = this.fields[index - 1];
        }
      } else {
        this.selectWidget = this.fields[index + 1];
      }
 
      this.$nextTick(() => {
        this.fields.splice(index, 1);
      });
    },
    handleWidgetClone(index) {
      const cloneData = {
        ...this.fields[index],
        key: Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999)
      };
 
      this.fields.splice(index, 0, cloneData);
 
      this.$nextTick(() => {
        this.selectWidget = this.fields[index + 1];
      });
    }
  }
};
</script>