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">
        <template #default="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="baseUrl + scope.row.cover"
            fit="cover"
          />
        </template>
      </el-table-column>
      <el-table-column label="项目端" prop="name" align="center" />
      <el-table-column label="项目链接" align="center" show-overflow-tooltip>
        <template #default="scope">
          <el-link type="primary" :href="scope.row.link" target="_blank">{{
            scope.row.link
          }}</el-link>
        </template>
      </el-table-column>

      <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="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="封面" prop="cover">
          <ImageUpload v-model="form.cover" :limit="1"></ImageUpload>
        </el-form-item>
        <el-form-item label="项目链接" prop="link">
          <el-input v-model="form.link" />
        </el-form-item>
        <el-form-item label="录屏">
          <FileUpload
            v-model="form.video"
            :limit="1"
            :fileSize="40"
            :fileType="['mp4']"
          ></FileUpload>
        </el-form-item>
        <el-col :span="1.5">
          <el-button
            style="margin: 0 0 18px 30px"
            type="primary"
            icon="Plus"
            size="small"
            @click="addUserandPass"
            >添加账号</el-button
          >
        </el-col>
        <el-form-item>
          <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"
              style="color: red"
              @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();
import { v4 as uuidv4 } from "uuid";
const data = reactive({
  form: {},
  rules: {
    name: [
      {
        required: true,
        message: "请填写项目名称",
        trigger: "blur",
      },
    ],
    cover: [
      {
        required: true,
        message: "请上传封面",
        trigger: "change",
      },
    ],
    link: [
      {
        required: true,
        message: "请填写项目链接",
        trigger: "blur",
      },
    ],
  },
  formListJson: [],
});
let title = ref("");
const { form, rules, formListJson } = toRefs(data);
const props = defineProps({
  modelValue: [Array],
});

let itemGather = reactive([]);
let innerVisible = ref(false);
const baseUrl = import.meta.env.VITE_APP_BASE_API;

watch(
  () => props.modelValue,
  (val) => {
    if (val) {
      // 首先将值转为数组
      const list = Array.isArray(val) ? val : [];
      itemGather = list;
    } else {
      return [];
    }
  },
  { deep: true, immediate: true }
);
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;
  title.value = "修改项目集合";
  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("update:modelValue", itemGather);
    }
  });
};
const cancelDataScope = () => {
  innerVisible.value = false;
};
const handlerAdd = () => {
  form.value = {};
  // formListJson.value = [{ userName: "", passWord: "" }];
  title.value = "新增项目集合";
  innerVisible.value = true;
};
</script>
<style scoped lang="scss">
.form-table {
  width: 100%;
}

::v-deep .user-data {
  margin-left: 100px;
  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>