sl-sfy-safety/src/views/dashboard/monitor/addWorkspace.vue

<template>
  <el-drawer class="test" v-model="tableCom" with-header="true" size="35%">
    <template #header="{ titleId }">
      <p :id="titleId">{{ companyAddTitle }}</p>
    </template>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="90px"
      class="demo-ruleForm"
      size="default"
      status-icon
    >
      <el-form-item label="公司名称" prop="name">
        <el-input v-model="ruleForm.name" style="width: 200px" />
      </el-form-item>
      <el-form-item label="上级场景" prop="seniorScene">
        <el-input v-model="ruleForm.seniorScene" style="width: 200px" disabled />
      </el-form-item>
      <el-form-item label="公司代码" prop="code">
        <el-input v-model="ruleForm.code" style="width: 200px" />
      </el-form-item>
      <el-form-item label="标签&模板" prop="sceneCode">
        <div style="width: 200px; height: 30px"></div>
        <div
          v-for="(item, index) in selectItems"
          :key="index"
          style="margin-bottom: 16px; display: flex"
        >
          <el-select v-model="item.tag" placeholder="请选择标签" style="width: 126px">
            <el-option
              v-for="item1 in options"
              :key="item1.value"
              :label="item1.label"
              :value="item1.value"
            />
          </el-select>
          <img
            src="@/assets/icons/link.png"
            alt=""
            style="width: 16px; margin-left: 2px; margin-right: 2px" />
          <el-select v-model="item.template" placeholder="请选择模板" style="width: 126px">
            <el-option
              v-for="item2 in options"
              :key="item2.value"
              :label="item2.label"
              :value="item2.value"
            />
          </el-select>
          <img
            src="../../../assets/icons/close.png"
            @click="deleScene(index)"
            alt=""
            style="width: 13px; height: 13px; margin-top: 10px; margin-left: 3px; cursor: pointer"
        /></div>
        <div style="width: 200px">
          <el-icon size="28px" @click="addChange" style="cursor: pointer"><CirclePlus /></el-icon
        ></div>
      </el-form-item>
      <el-form-item label="状态">
        <el-switch v-model="addEnable" active-value="1" inactive-value="0" class="switchUse" />
      </el-form-item>
    </el-form>
    <div style="position: absolute; left: 108px; bottom: 67px">
      <el-button v-if="companyAddTitle === '添加公司'" type="warning" @click="resetDraw"
        >重置</el-button
      >
      <el-button type="primary" v-if="companyAddTitle === '添加公司'" @click="addNewTypeCom">
        提交
      </el-button>
      <el-button type="primary" v-if="companyAddTitle !== '添加公司'" @click="editedSub">
        提交
      </el-button>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  //   import { SubscribeItem } from '@/api/subscribe/subscribe';

  interface User {
    name?: string;
    tag?: string;
    code?: string;
    hasChildren?: boolean;
    children?: User[];
  }

  const props = defineProps<{
    subItem: User;
    handleConig: (row) => unknown;
    handleAdd: (row) => unknown;
    handleEdit: (row) => unknown;
    handleDelete: (row) => unknown;
    handleUp: (row) => unknown;
    handleDown: (row) => unknown;
  }>();

  const isBook = computed(() => (props.subscribeItem.booking === '0' ? true : false));

  const changeConig = () => {
    props.handleConig(props.subItem);
  };

  const changeAdd = () => {
    props.handleAdd(props.subItem);
  };

  const changeEdit = () => {
    props.handleEdit(props.subItem);
  };

  const changeDelete = () => {
    props.handleDelete(props.subItem);
  };

  const changeUp = () => {
    props.handleUp(props.subItem);
  };

  const changeDown = () => {
    props.handleDown(props.subItem);
  };
</script>

<style scoped>
  .wordStyle {
    height: 22px;
    font-size: 14px;
    color: #1890ff;
    line-height: 22px;
    cursor: pointer;
  }
  .otp-btn {
    width: 52px;
    height: 26px;
  }

  :deep(.el-button--primary) {
    --el-button-bg-color: #3f9eff;
    --el-button-hover-bg-color: #64b0fe;
    --el-button-active-bg-color: #2f8ae7;
  }
  :deep(.el-button--danger) {
    --el-button-bg-color: #f56c6c;
    --el-button-hover-bg-color: #f68888;
    --el-button-active-bg-color: #c35353;
  }
</style>