esswisdom_web/src/views/Administration/addition copy.vue

<template>
  <div>
    <div class="card content-box">
      <div class="name">{{ supertype }}</div>
      <el-divider />
      <div class="user_box">
        <div class="user_left">
          <el-form ref="formRef" :model="numberValidateForm" label-width="auto" class="demo-ruleForm">
            <div class="elform">
              <el-form-item label="模板名称：" prop="postName" :rules="[{ required: true, message: '请输入模板名称' }]">
                <el-input
                  v-model.number="numberValidateForm.postName"
                  style="width: 300px"
                  size="large"
                  type="text"
                  placeholder="请输入模板名称"
                  autocomplete="off"
                />
              </el-form-item>
              <el-form-item label="电站名称：">
                <el-input
                  v-model.number="numberValidateForm.postCode"
                  style="width: 300px"
                  size="large"
                  type="text"
                  placeholder="请输入电站名称"
                  autocomplete="off"
                />
              </el-form-item>
            </div>
            <div class="elform">
              <el-form-item label="模板状态：">
                <el-radio-group v-model="numberValidateForm.status">
                  <el-radio value="0">正常</el-radio>
                  <el-radio value="1">停用</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>

            <div class="elform1">
              <!-- <el-form-item label="标签：">
                <el-input
                  v-model.number="numberValidateForm.remark"
                  style="width: 300px"
                  size="large"
                  type="text"
                  placeholder="请输入标签"
                  autocomplete="off"
                />
              </el-form-item> -->
              <el-button type="primary" @click="addNewRow">新增行</el-button>
              <el-table :data="tableData" style="width: 100%" v-loading="loading" border @row-click="handleRowClick">
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="age" label="年龄"></el-table-column>
                <el-table-column prop="email" label="邮箱"></el-table-column>
                <el-table-column label="操作">
                  <template #default="{ row }">
                    <el-button type="text" @click="editRow(row)">编辑</el-button>
                    <el-button type="text" @click="deleteRow(row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-divider />
            <el-form-item class="bottom">
              <el-button type="primary" @click="submitForm(formRef)">保存</el-button>
              <el-button @click="resetForm(formRef)">关闭</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { platformpostadd, platformpostedit, platformshupostedit } from "@/api/home/Multisite";
import { FormInstance } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { nextTick } from "vue";

const router = useRouter();
const route = useRoute();

const formRef = ref<FormInstance>();
const supertype = ref(route.query.type);

const numberValidateForm = reactive({
  id: route.query.id,
  parentId: "",
  postName: "",
  postCode: "",
  postSort: "",
  remark: "",
  status: "0"
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async valid => {
    if (valid) {
      if (route.query.type == "岗位新增") {
        const { data } = await platformpostadd(numberValidateForm);
        console.log(data);
      } else {
        const { data } = await platformpostedit(numberValidateForm);
        console.log(data);
      }
      router.back();
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  router.push("/post/index");
};
const yonghueditdata = ref();
const getghuedit = async () => {
  const { data } = await platformshupostedit(route.query.id);
  yonghueditdata.value = data;
  console.log(yonghueditdata.value);
  numberValidateForm.postName = yonghueditdata.value.post.postName;
  numberValidateForm.postCode = yonghueditdata.value.post.postCode;
  numberValidateForm.postSort = yonghueditdata.value.post.postSort;
  numberValidateForm.remark = yonghueditdata.value.post.remark;
  numberValidateForm.status = yonghueditdata.value.post.status;
};
interface TableDataItem {
  name: string;
  age: number;
  email: string;
}
const loading = ref(false);
const addNewRow = () => {
  const newRow = ref<TableDataItem>({
    name: "",
    age: 0,
    email: ""
  });
  tableData.push(newRow.value);

  nextTick(() => {
    const tableBody = document.querySelector(".el-table__body-wrapper");
    if (tableBody) {
      tableBody.scrollTop = tableBody.scrollHeight;
    }
  });
};
const tableData = reactive<TableDataItem[]>([
  { name: "张三", age: 30, email: "zhangsan@example.com" },
  { name: "李四", age: 25, email: "lisi@example.com" },
  { name: "王五", age: 28, email: "wangwu@example.com" }
  // ...其他数据
]);

const editRow = (row: TableDataItem) => {
  console.log(row);

  // 编辑行的逻辑，可以根据实际情况进行实现
};
const deleteRow = (row: TableDataItem) => {
  console.log(row);
  // 删除行的逻辑，可以根据实际情况进行实现
};
const handleRowClick = (row: TableDataItem) => {
  console.log(row);
  // 点击行的处理逻辑，可以根据实际情况进行实现
};
onMounted(() => {
  if (route.query.type == "岗位编辑") {
    getghuedit();
  }
});
</script>
<style scoped lang="scss">
@import "./addition.scss";
</style>