DataOps-platform/frontend/src/components/Common/featureSlide.vue

<template>
    <div class="slide" :style="`width: ${width}px`">
        <h4 class="d-flex align-center justify-space-between">
          选择功能模块
          <v-btn color="primary" small @click="show = true">
            <v-icon left>mdi-plus</v-icon>
            自定义模块
          </v-btn>
        </h4>
        <div class="slide_list">
            <v-list dense shaped>
                <v-list-item v-for="item in items" :key="item.id" class="pa-0">
                    <v-list-item-content>
                        <v-list-item-title>{{ item.label }}</v-list-item-title>
                    </v-list-item-content>
                    <v-list-item-action class="flex-row">
                        <v-btn icon @click="handleClick(item)">
                          <v-icon :color="+item.active ? 'error' : 'info'">
                            {{ +item.active ? 'mdi-minus-circle' : 'mdi-plus-circle-outline' }}
                          </v-icon>
                        </v-btn>
                        <!-- <v-btn icon @click="handleDelete(item)">
                          <v-icon color="error">
                            mdi-trash-can
                          </v-icon>
                        </v-btn> -->
                    </v-list-item-action>
                </v-list-item>
            </v-list>
        </div>
        <m-dialog title="新增自定义模块" :visible.sync="show" @submit="handleSubmit">
          <form-list ref="form" :items="formItems"></form-list>
        </m-dialog>
    </div>
</template>

<script>
import FormList from '@/components/Form/list'
import MDialog from '@/components/Dialog'
import { saveWorkbench } from '@/api/menu'
export default {
  name: 'featureSlide',
  components: {
    MDialog,
    FormList
  },
  props: {
    width: {
      type: [String, Number],
      default: '300'
    },
    items: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      show: false,
      formItems: {
        options: [
          {
            type: 'text',
            key: 'label',
            value: null,
            label: '请输入标题 *',
            outlined: true,
            dense: true,
            rules: [v => !!v || '请输入标题']
          },
          {
            type: 'text',
            key: 'enName',
            value: null,
            label: '请输入英文标题',
            outlined: true,
            dense: true
          },
          {
            type: 'text',
            key: 'src',
            value: null,
            label: '请输入第三方地址 *',
            outlined: true,
            dense: true,
            rules: [v => !!v || '请输入第三方地址']
          }
        ]
      }
    }
  },
  methods: {
    async handleSubmit () {
      if (!this.$refs.form.validate()) {
        return
      }
      const { src, ...obj } = this.formItems.options.reduce((prev, item) => {
        prev[item.key] = item.value
        return prev
      }, {})
      try {
        await saveWorkbench({
          active: '1',
          name: 'iframePage',
          ...obj,
          sort: 999,
          meta: {
            homeType: 3,
            src
          }
        })
        this.$snackbar.success('新增成功')
        this.show = false
        this.$emit('refresh')
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    handleAdd () {
      this.show = true
    },
    handleClick (item) {
      item.active = 1 ^ item.active
    }
    // 删除节点
    // async handleDelete (item) {
    //   console.log(item)
    //   this.$confirm('提示', '是否确定删除该模块').then()
    // }
  }
}
</script>

<style lang="scss" scoped>
.slide_list {
  height: calc(100vh - 112px);
  overflow-y: auto;
  &::-webkit-scrollbar { // 隐藏滚动条
    width: 6px;
    height: 6px;
    display: none;
  }
}
</style>