PJob-prisma/components/UpdateBox.vue

<style scoped>
@media screen and (min-width: 200px) and (max-width: 1200px) {
  .n-card-box {
    max-width: 100%;
    height: 50%;
    margin: auto;
  }
}
@media screen and (min-width: 1200px) {
  .n-card-box {
    max-width: 50%;
    height: 50%;
    margin: auto;
  }
}
.n-card-box .name {
  font-size: large;
  float: left;
}
.n-card-box .pay {
  font-size: large;
  color: red;
  float: right;
}
</style>

<template>
  <n-button @click="showCreate = true" style="margin: auto" type="success"
    >更新</n-button
  >
  <n-modal v-model:show="showCreate">
    <n-card class="n-card-box">
      <template #header>
        兼职名称：
        <n-input
          v-model:value="jobname"
          type="text"
          placeholder="兼职名称"
          autosize
          style="min-width: 40%"
        >
        </n-input>
      </template>
      <template #header-extra>
        日薪：
        <n-input-number
          v-model:value="daypay"
          placeholder="日薪"
          style="max-width: 50%"
          :precision="0.5"
        />￥/天
      </template>
      <template #default>
        兼职描述：
        <n-input v-model:value="desc" type="textarea" placeholder="兼职描述" />
        <n-grid cols="1 200:2 600:4">
          <n-gi span="1">
            地点：
            <n-select
              placeholder="区域"
              class="selection"
              v-model:value="select_area"
              :options="options_area"
            />
          </n-gi>
          <n-gi span="1">
            时间：
            <n-select
              placeholder="时间"
              max-tag-count="responsive"
              class="selection"
              v-model:value="select_time"
              :options="options_time"
            />
          </n-gi>

          <n-gi span="1">
            类型:
            <n-select
              placeholder="类型"
              class="selection"
              max-tag-count="responsive"
              v-model:value="select_type"
              :options="options_type"
            />
          </n-gi>
          <n-gi span="2">
            工作时间：<br />
            <n-input
              v-model:value="time"
              type="text"
              placeholder="如：8:00 - 9:00"
              autosize
              style="min-width: 60%"
            >
            </n-input
          ></n-gi>
          <n-gi span="2">
            封面图片Url：<br />
            <n-input
              v-model:value="img"
              type="text"
              placeholder="封面图片URL"
              autosize
              style="min-width: 80%"
            >
            </n-input
          ></n-gi>
          <n-gi>
            顶置：
            <n-switch v-model:value="pin" />
          </n-gi>
        </n-grid>
      </template>
      <template #footer>
        <n-button type="info" style="float: left" @click="submit" ghost round
          >提交</n-button
        >
        <n-button
          type="error"
          style="float: right"
          @click="showCreate = false"
          ghost
          round
          >关闭</n-button
        >
        <br />

        <br />
        <hr />
        <h3 style="text-align: center">预览</h3>
        <n-card
          class="n-card-box"
          style="width: 600px"
          :title="jobname"
          preset="card"
          size="huge"
          role="dialog"
          aria-modal="true"
        >
          <template #header-extra>
            <text class="pay">{{ daypay }}￥/天 </text>
          </template>
          <template #default>
            <p v-html="desc"></p>
          </template>
          <template #cover>
            <n-image object-fit="contain" :src="img" preview-disabled lazy />
          </template>
          <template #footer> 工作时间：{{ time }} </template>
        </n-card>
      </template>
    </n-card>
  </n-modal>
</template>
<script setup lang="ts">
import { useMessage } from "naive-ui";
const props = defineProps({ Job: Object });
const message = useMessage();
const config = useRuntimeConfig();
const showCreate = ref(false);
const emit = defineEmits(["changed"]);
const jobname = ref(props.Job?.name);

const desc = ref(props.Job?.data.desc);

const daypay = ref(props.Job?.data.pay);

const pin = ref(props.Job?.pin);
const time = ref(props.Job?.data.time);

const img = ref(props.Job?.data.img);

const select_area = ref(props.Job?.area);
const select_time = ref(props.Job?.worktime);
const select_type = ref(props.Job?.place);
const options_area = ref([
  {
    label: "校内",
    value: "in",
    disabled: false,
  },
  {
    label: "校外",
    value: "out",
  },
]);
const options_time = ref([
  {
    label: "全天",
    value: "all",
    disabled: false,
  },
  {
    label: "中午",
    value: "noon",
    disabled: false,
  },
  {
    label: "上午",
    value: "moning",
    disabled: false,
  },
  {
    label: "下午",
    value: "afnon",
    disabled: false,
  },
  {
    label: "晚上",
    value: "night",
  },
]);
const options_type = ref([
  {
    label: "室内",
    value: "in",
    disabled: false,
  },
  {
    label: "室外",
    value: "out",
  },
]);
async function submit() {
  const result: string = await $fetch("/api/job/update", {
    method: "post",
    body: {
      id: props.Job?.id,
      name: jobname.value,
      worktime: select_time.value,
      place: select_area.value,
      updateTime: new Date(),
      pin: pin.value,
      data: {
        id: props.Job?.data.id,
        desc: desc.value,
        img: img.value,
        time: time.value,
        pay: daypay.value,
      },
    },
  });
  const res = JSON.parse(result);
  if (res.code) {
    message.info("更新了 " + jobname.value + " " + res.status);
    showCreate.value = false;
  } else {
    message.error("Faild delete" + jobname.value + ".Because " + res);
  }
  emit("changed");
}
</script>