sl-sfy-safety/src/views/system-config/scene-manage/components/WorkspaceDrawer-shangfei.vue

<template>
  <div>
    <el-drawer
      class="test"
      :model-value="true"
      @close="() => emit('onClose')"
      with-header="true"
      size="35%"
    >
      <template #header="{ titleId }">
        <p :id="titleId">{{ title }}</p>
      </template>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        size="default"
        status-icon
      >
        <el-form-item label="工位名称" prop="name">
          <el-select v-model="ruleForm.name" placeholder="请选择工位" style="width: 200px">
            <el-option
              v-for="item in workSpaceList"
              :key="item.workspaceCode"
              :label="item.workspaceName"
              :value="item.workspaceName"
              :disabled="!item.isEnable"
              @click="changeWorkSpaceCode(item.workspaceCode, item.isEnable)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属车间" prop="seniorScene">
          <el-input v-model="ruleForm.seniorScene" disabled />
        </el-form-item>
        <el-form-item label="负责人" prop="principalName">
          <el-input v-model="ruleForm.principalName" />
        </el-form-item>
        <!-- <el-form-item label="状态">
          <el-switch
            v-model="ruleForm.isDisabled"
            :active-value="IS_DISABLED.FALSE"
            :inactive-value="IS_DISABLED.TRUE"
            class="switchUse"
          />
        </el-form-item> -->
      </el-form>
      <div style="position: absolute; left: 108px; bottom: 67px">
        <el-button v-if="!props.detail.id" @click="resetDraw">重置</el-button>
        <el-button v-if="!props.detail.id" type="primary" @click="addNewType(ruleFormRef)">
          提交
        </el-button>
        <el-button v-if="props.detail.id" type="primary" @click="editedSub(ruleFormRef)">
          提交
        </el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
  import { computed, reactive, ref, defineProps, defineEmits, watch } from 'vue';
  // import { IS_DISABLED } from '@/types/scene/constant.ts';
  import { type FormInstance, type FormRules } from 'element-plus';
  import { addWorkspace, editWorkspace } from '@/api/scene/scene.ts';
  import { getWorkSpaceInfoList } from '@/api/workShopData';

  const props = defineProps<{
    detail: {
      id?: number;
      name?: string;
      code?: string;
      seniorScene?: string;
      principalName?: string;
      // isDisabled?: IS_DISABLED;
      workshopId?: number;
      workshopCode?: string;
    };
  }>();

  type workSpaceListType = {
    isEnable: boolean;
    workspaceCode: string;
    workspaceName: string;
  };

  const workSpaceList = ref<workSpaceListType[]>([]);
  getWorkSpaceInfoList({ workshopCode: props.detail.workshopCode }).then((res) => {
    workSpaceList.value = res;
  });
  const changeWorkSpaceCode = (workspaceCode: string, isEnable: boolean) => {
    if (isEnable === false) return;
    ruleForm.code = workspaceCode;
  };

  const emit = defineEmits<{
    (e: 'onOk'): unknown;
    (e: 'onClose'): unknown;
  }>();

  const title = computed(() => {
    if (props.detail.principalName) {
      return '编辑工位';
    }
    return '添加工位';
  });

  //表格中的规则
  const ruleFormRef = ref<FormInstance>();

  interface RuleForm {
    name: string; //名称
    seniorScene: string; //上级场景
    code: string; //代码
    principalName?: string; //负责人
    // isDisabled?: IS_DISABLED;
  }
  const ruleForm = reactive<RuleForm>({
    name: '',
    seniorScene: '',
    code: '',
    principalName: '',
    // isDisabled: IS_DISAsBLED.FALSE,
  });
  const rules = reactive<FormRules>({
    name: [
      { required: true, message: '工位不能为空', trigger: 'blur' },
      { min: 1, max: 100, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    // seniorScene: [
    //   { required: true, message: '', trigger: 'blur' },
    //   { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
    // ],
    principalName: [
      { required: true, message: '负责人不能为空', trigger: 'blur' },
      { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
    ],
  });

  watch(
    () => props.detail,
    (data) => {
      ruleForm.name = data.name!;
      ruleForm.seniorScene = data.seniorScene!;
      ruleForm.code = data.code!;
      ruleForm.principalName = data.principalName;
      // ruleForm.isDisabled = data.isDisabled;
    },
    { immediate: true },
  );

  //添加的提交
  const addNewType = (formEl: FormInstance | undefined) => {
    if (!formEl) return;

    formEl.validate((valid) => {
      if (!valid) {
        return;
      }

      const newAddData = {
        code: ruleForm.code,
        workshopId: props.detail.workshopId,
        name: ruleForm.name,
        principalName: ruleForm.principalName,
        // isDisabled: ruleForm.isDisabled,
      };

      addWorkspace(newAddData)
        .then(() => {
          console.log('成功添加车间');
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          emit('onOk');
        });
    });
  };

  //编辑时的提交
  const editedSub = (formEl: FormInstance | undefined) => {
    if (!formEl) return;

    formEl.validate((valid) => {
      if (!valid) {
        return;
      }

      const editNewWorkspaceData = {
        id: props.detail.id,
        code: ruleForm.code,
        name: ruleForm.name,
        principalName: ruleForm.principalName,
        // isDisabled: ruleForm.isDisabled,
      };

      //编辑并上传
      editWorkspace(editNewWorkspaceData)
        .then(() => {
          console.log('成功修改车间');
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          emit('onOk');
        });
    });
  };

  //重置编辑框
  const resetDraw = () => {
    ruleForm.name = '';
    ruleForm.code = '';
    // ruleForm.isDisabled = IS_DISABLED.FALSE;
    ruleForm.principalName = '';
  };
</script>

<style scoped>
  .tag-select {
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.15);
  }
</style>