岑健浩 / SNManage

<script setup>
  import { reactive, ref } from 'vue'
  // import { FormInstance } from 'element-plus'
  import axios from 'axios';
  import { ElMessage } from 'element-plus'
  import { addSNsApi, getSNsApi, deleteSNsApi } from '../api/api';

  const addFormRef = ref()
  const deleteFormRef = ref()

  //获取的SN内容
  const SNsContent = ref('...')

  //当前显示的表单 1-添加SN 2-获取SN 3-删除SN
  const currForm = ref('1');
  const changeForm = (tab, event) => {
    currForm.value = tab.props.name;
    //把SN数据查出来
    if (currForm.value == 3) {
      axios({
          method: getSNsApi.method,
          url: getSNsApi.url
      }).then(response => {
          if (response.data.code == 200) {
            SNsContent.value = response.data.data;

          } else {
              ElMessage({
                  message: response.data.message,
                  type: 'error',
              })
          }

      }).catch(err => {
          ElMessage.error(err)
      })
    }
    
  }


  //添加SN的表单
  const dynamicValidateAddForm = reactive({
    SNs: [
      {
        key: 1,
        value: '',
      },
    ],
    projectName: '',
  })

  //删除SN的表单
  const dynamicValidateDeleteForm = reactive({
    SNs: [
      {
        key: 1,
        value: '',
      },
    ]
  })

  

  const removeAddFormDomain = (domainItem) => {
    const index = dynamicValidateAddForm.SNs.indexOf(domainItem)
    if (index > 0) {
      dynamicValidateAddForm.SNs.splice(index, 1)
    }
  }
  const removeDeleteFormDomain = (domainItem) => {
    const index = dynamicValidateDeleteForm.SNs.indexOf(domainItem)
    if (index > 0) {
      dynamicValidateDeleteForm.SNs.splice(index, 1)
    }
  }

  const addSNAddDomain = () => {
    dynamicValidateAddForm.SNs.push({
      key: Date.now(),
      value: '',
    })
  }

  const addSNDeleteDomain = () => {
    dynamicValidateDeleteForm.SNs.push({
      key: Date.now(),
      value: '',
    })
  }

  //提交添加SN
  const submitAddSNForm = (formInstance) => {
    if (!formInstance) return
    formInstance.validate((valid) => {
      if (valid) {
        let addSNs = [];
        for (let SNItem of dynamicValidateAddForm.SNs) {
          addSNs.push(SNItem.value.trim())
        }

        //调用后端接口添加SNs
        axios({
          method: addSNsApi.method,
          url: addSNsApi.url,
          data: {
            projectName: dynamicValidateAddForm.projectName,
            sns: addSNs
          }
        }).then(response => {
          if (response.data.code == 200) {
            ElMessage({
              //showClose: true,
              duration: 3000,
              message: response.data.message,
              type: 'success',
            })

          } else {
            ElMessage({
              //showClose: true,
              duration: 3000,
              message: response.data.message,
              type: 'error',
            })
          }

        }).catch(err => {
          ElMessage.error(err)
        })
        console.log(dynamicValidateAddForm.projectName)
      } else {
        console.log('error submit!')
        return false
      }
    })
  }

  //提交删除SN
  const submitDeleteSNForm = (formInstance) => {
    if (!formInstance) return
    formInstance.validate((valid) => {
      if (valid) {
        let deleteSNs = [];
        for (let SNItem of dynamicValidateDeleteForm.SNs) {
          deleteSNs.push(SNItem.value.trim())
        }

        //调用后端接口删除SNs
        axios({
          method: deleteSNsApi.method,
          url: deleteSNsApi.url,
          data: {
            sns: deleteSNs
          }
        }).then(response => {
          if (response.data.code == 200) {
            ElMessage({
              //showClose: true,
              duration: 3000,
              message: response.data.message,
              type: 'success',
            })
          } else {
              ElMessage({
                //showClose: true,
                duration: 3000,
                message: response.data.message,
                type: 'error',
              })
          }

        }).catch(err => {
          ElMessage.error(err)
        })
        
      } else {
        console.log('error submit!')
        return false
      }
    })
  }

  const resetForm = (formInstance) => {
    if (!formInstance) return
    formInstance.resetFields()
  }


</script>

<template>
  <div class="home">
  
    <el-tabs type="border-card" v-model="currForm" @tab-click="changeForm">
      <el-tab-pane label="添加SN" name="1"></el-tab-pane>
      <el-tab-pane label="删除SN" name="2"></el-tab-pane>
      <el-tab-pane label="获取SN" name="3"></el-tab-pane>
      
        <el-form
        ref="addFormRef"
        style="max-width: 600px"
        :model="dynamicValidateAddForm"
        label-width="auto"
        class="demo-dynamic"
        v-show="currForm == 1? true : false"
      >
        <el-form-item
          prop="projectName"
          label="项目名称"
          :rules="[
            {
              required: true,
              message: '请输入项目名称',
              trigger: 'blur',
            }
          ]"
        >
          <el-input v-model="dynamicValidateAddForm.projectName" />
        </el-form-item>
        <el-form-item
          v-for="(SN, index) in dynamicValidateAddForm.SNs"
          :key="SN.key"
          :label="'SN' + (index+1)"
          :prop="'SNs.' + index + '.value'"
          :rules="{
            required: true,
            message: 'SN不能为空',
            trigger: 'blur',
          }"
        >
          <el-input v-model="SN.value" />
          <el-button class="mt-2" @click.prevent="removeAddFormDomain(SN)"
            >移除</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitAddSNForm(addFormRef)">提交</el-button>
          <el-button @click="addSNAddDomain">添加选项</el-button>
          <el-button @click="resetForm(addFormRef)">重置</el-button>
        </el-form-item>
      </el-form>

      <el-form
        ref="deleteFormRef"
        style="max-width: 600px"
        :model="dynamicValidateDeleteForm"
        label-width="auto"
        class="demo-dynamic"
        v-show="currForm == 2? true : false"
      >
        <el-form-item
          v-for="(SN, index) in dynamicValidateDeleteForm.SNs"
          :key="SN.key"
          :label="'SN' + (index+1)"
          :prop="'SNs.' + index + '.value'"
          :rules="{
            required: true,
            message: 'SN不能为空',
            trigger: 'blur',
          }"
        >
          <el-input v-model="SN.value" />
          <el-button class="mt-2" @click.prevent="removeDeleteFormDomain(SN)"
            >移除</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitDeleteSNForm(deleteFormRef)">提交</el-button>
          <el-button @click="addSNDeleteDomain">添加选项</el-button>
          <el-button @click="resetForm(deleteFormRef)">重置</el-button>
        </el-form-item>
      </el-form>

      <el-text class="mx-1" v-show="currForm == 3? true : false">
        {{ SNsContent }}
      </el-text>
     
      
    </el-tabs>
    
    

  </div>
    
</template>
  
<style>
  .home {
    width: 50%;
    margin: 0px auto;
  }

</style>