jc-modle/src/views/jichuang/case/table.vue

<template>
  <div class="form-table">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="Plus" size="small" @click="handlerAdd"
          >新增</el-button
        >
      </el-col>
    </el-row>
    <el-table :data="itemGather">
      <el-table-column label="序号" type="index" align="center" width="100" />
      <el-table-column label="封面" prop="cover" align="center" />
      <el-table-column label="项目端" prop="name" align="center" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-tooltip content="修改" placement="top">
            <el-button
              link
              type="primary"
              icon="Edit"
              @click="handleUpdate(scope.row)"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button
              link
              type="primary"
              icon="Delete"
              @click="handleDelete(scope.$index)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      v-model="innerVisible"
      width="800px"
      title="新增项目集合"
      append-to-body
    >
      <el-form ref="formTable" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="项目端" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item label="封面">
          <ImageUpload v-model="form.cover" :limit="1"></ImageUpload>
        </el-form-item>
        <el-form-item label="录屏">
          <FileUpload v-model="form.video" :limit="1"></FileUpload>
        </el-form-item>
        <el-form-item label="账号">
          <div
            class="user-data"
            v-for="(item, index) in formListJson"
            :key="index"
          >
            <el-input
              v-model="item.userName"
              :placeholder="'用户名-' + (index + 1)"
            />
            <el-input
              v-model="item.passWord"
              :placeholder="'密码-' + (index + 1)"
              style="margin-top: 6px"
            />
            <div class="add-btn" v-show="index == 0" @click="addUserandPass">
              <el-icon><CirclePlus /></el-icon>
            </div>
            <div
              class="add-btn"
              style="color: red"
              v-show="index != 0"
              @click="closeUserandPass(index)"
            >
              <el-icon><CircleClose /></el-icon>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitDataScope">提 交</el-button>
          <el-button @click="cancelDataScope">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
const { proxy } = getCurrentInstance();
let $emit = defineEmits(["childSub"]);
import { v4 as uuidv4 } from "uuid";
const data = reactive({
  form: {},
  rules: {
    name: [
      {
        required: true,
        message: "请填写项目名称",
        trigger: "blur",
      },
    ],
    cover: [
      {
        required: true,
        message: "请上传封面",
        trigger: "change",
      },
    ],
  },
  formListJson: [{ userName: "", passWord: "" }],
});
const { form, rules, formListJson } = toRefs(data);
let itemGather = reactive([]);
let innerVisible = ref(false);

const addUserandPass = () => {
  formListJson.value.push({ userName: "", passWord: "" });
};
const closeUserandPass = (index) => {
  formListJson.value.splice(index, 1);
};

const handleUpdate = (row) => {
  form.value = row;
  formListJson.value = form.value.userData;
  innerVisible.value = true;
};

const handleDelete = (index) => {
  proxy.$modal
    .confirm('是否确认删除序号为"' + index + '"的数据项?')
    .then(function () {
      return itemGather.splice(index, 1);
    })
    .then(() => {
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
};

const submitDataScope = () => {
  proxy.$refs["formTable"].validate((valid) => {
    if (valid) {
      if (form.value.id) {
        let index = itemGather.findIndex((item) => item.id == form.value.id);
        itemGather[index] = form.value;
      } else {
        form.value.id = uuidv4();
        form.value.userData = formListJson.value;
        itemGather.push(form.value);
      }
      innerVisible.value = false;
      $emit("childSub", itemGather);
    }
  });
};
const cancelDataScope = () => {
  innerVisible.value = false;
};
const handlerAdd = () => {
  form.value = {};
  formListJson.value = [{ userName: "", passWord: "" }];
  innerVisible.value = true;
};
</script>
<style scoped lang="scss">
.form-table {
  width: 100%;
}

::v-deep .user-data {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  .el-input {
    margin-top: 0 !important;
    margin-right: 6px;
  }
  .add-btn {
    cursor: pointer;
    font-size: 23px;
  }
}
</style>