dySdDesignerVue_DesignModule/src/views/Editor/CanvasRight/Components/ElementPermission.vue

<template>
  <div class="element-permission">
    <div class="mb-2">
      <b>客户可编辑项</b>
    </div>
    <div class="mb-2">
      <el-checkbox-group v-if="eleType == 'text'" v-model="handleElement.permissionsConfig" size="small">
        <el-checkbox v-for="perm in textPerms" :key="perm.code" :value="perm.code"
                     @change="eleChange">
          {{ perm.name }}
        </el-checkbox>
      </el-checkbox-group>
      <el-checkbox-group v-if="eleType == 'image'" v-model="handleElement.permissionsConfig" size="small">
        <el-checkbox v-for="perm in imagePerms" :key="perm.code" :value="perm.code"
                     @change="eleChange">
          {{ perm.name }}
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <el-divider style="margin: 12px 0"/>

    <el-row>
      <el-col :span="7" class="slider-name"
      >元素别名：
      </el-col
      >
      <el-col :span="3"></el-col>
      <el-col :span="14">
        <el-input v-model="handleElement.itemName" @change="eleChange">
        </el-input>
      </el-col>
    </el-row>
    <el-divider style="margin: 12px 0"/>
  </div>
</template>

<script lang="ts" setup>
import {computed, ref, watch} from "vue";
import {storeToRefs} from "pinia";
import {useMainStore} from "@/store";
import * as fabric from "fabric";
import useCanvas from "@/views/Canvas/useCanvas";
import {CanvasElement} from "@/types/canvas";

const props = defineProps({
  eleType: {
    type: String,
    required: true,
  },
});

const eleName = ref("")
const textPerms = [
  {
    "name": "文字内容",
    "code": "0"
  },
  {
    "name": "字号",
    "code": "1"
  },
  {
    "name": "字体",
    "code": "2"
  },
  {
    "name": "颜色",
    "code": "3"
  },
  {
    "name": "字间距",
    "code": "4"
  },
  {
    "name": "元素尺寸",
    "code": "5"
  },
  {
    "name": "元素位置",
    "code": "6"
  }
]

const imagePerms = [
  {
    "name": "上传图片",
    "code": "0"
  },
  {
    "name": "图片尺寸",
    "code": "1"
  },
  {
    "name": "图片位置",
    "code": "2"
  }
]

const [canvas] = useCanvas();
const {canvasObject} = storeToRefs(useMainStore());

const handleElement = computed(() => canvasObject.value as CanvasElement);

const eleChange = () => {
  if (!handleElement.value) return;
  canvas.renderAll();
}

</script>

<style lang="scss" scoped>
.row {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.switch-wrapper {
  text-align: right;
}

.slider {
  flex: 3;
}

.slider-name {
  display: flex;
  align-items: center;
}

.slider-num {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>