vue3 增删改查

最新推荐文章于 2024-02-21 18:07:28 发布

原创最新推荐文章于 2024-02-21 18:07:28 发布 · 852 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

在页面里先导入api文件夹

获取列表

1.循环列表

 <div class="double-list" v-for="(item, index) in datas" :key="index">

</div>

2.发请求

//城市数据渲染
const citys = reactive([
  {
    name: "长沙",
  },
  {
    name: "株州",
  },
  {
    name: "湘潭",
  },
  {
    name: "衡阳",
  },
  {
    name: "邵阳",
  },
  {
    name: "岳阳",
  },
  {
    name: "常德",
  },
  {
    name: "张家界",
  },
  {
    name: "益阳",
  },
  {
    name: "郴州",
  },
  {
    name: "永州",
  },
  {
    name: "怀化",
  },
  {
    name: "娄底",
  },
]);
//院校类型渲染
const types = reactive([
  {
    name: "专业院校",
  },
  {
    name: "本科院校",
  },
]);
//双选会状态渲染
const states = reactive([
  {
    name: "报名中",
    num: 0,
  },
  {
    name: "报名截止",
    num: 1,
  },
  {
    name: "进行中",
    num: 2,
  },
  {
    name: "已结束",
    num: 3,
  },
]);
//热门推荐渲染
const hotSearch = reactive([
  {
    name: "热门推荐",
    num: 1,
  },
  {
    name: "全部场次",
    num: 0,
  },
  {
    name: "我的报名",
    num: null,
  },
]);
//日期
const value2 = ref("");
//双选会状态
const MeetStatus = ref();
//城市选择
const AreaName = ref(null);
//关键字
const Keyword = ref("");
//热门推荐
const RecommendType = ref(1);

//分页相关
//每一页的条数
const pageSize = ref(10);
//当前的页码
const currentPage = ref(1);
//总条数
const total = ref(0);
//接受响应回来的数据
const datas = reactive([]);
const getDoubleList = () => {
  doubleOptionApi({
    page: currentPage.value, //当前页码
    pageSize: pageSize.value, //每页条数
    Keyword: Keyword.value, //关键字
    MeetStatus: MeetStatus.value, //状态
    AreaName: AreaName.value, //城市
    RecommendType: RecommendType.value, //是否热门推荐
  }).then((res) => {
    console.log("res", res);
    total.value = res.result.total;
    datas.splice(0, datas.length, ...res.result.items);
  });
};

删除

 <el-button type="primary" text @click="deleteRec(scope.row.id)"
              >删除</el-button
            >

// 删除招聘简章
const deleteRec = (id) => {
  ElMessageBox.confirm("您确定要删除吗？", "温馨提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    DelRecruitmentApi(id)
      .then((res) => {
        console.log("res", res);
        if (res.data.code === 200) {
        //渲染列表 
          getRulesList();
          console.log("删除成功");
          ElMessage({
            type: "success",
            message: "删除成功",
          });
        } else {
          console.log("删除失败");
        }
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "删除失败",
        });
      });
  });
};

预览

import { ElMessageBox } from 'element-plus'
const router = useRouter()
const formRef = ref()

const state = reactive({
  form: {
    title: '',
    content: '',
    remark: ''
  }
})
var { form } = toRefs(state)
// 预览
onMounted(async () => {
  var id = router.currentRoute.value.query.id
  if (id) {
    var res = await aSingleGeneralApi({ id: id })
    state.form = res.result ?? {}
    console.log(state.form)
  }
})

编辑添加

// 添加 编辑
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (!valid) return
    if (state.form.id) {
      // 编辑
      UpRecruitmentApi(state.form).then((res) => {
        // console.log("res", res);
        if (res.code === 200) {
          ElMessageBox({
            title: '提示',
            message: '添加成功'
          })
        }
        router.push('/home/generalRules')
      })
    } else {
      // 添加
      AddRecruitmentApi(state.form).then((res) => {
        // console.log("res", res);
        if (res.code === 200) {
          ElMessageBox({
            title: '提示',
            message: '添加成功'
          })
        }
        router.push('/home/generalRules')
      })
    }
  })
}