parking/src/views/backend/enterprise/mediapromotion/ad/popupForm.vue

<template>
  <!-- 对话框表单 -->
  <el-dialog custom-class="ba-operate-dialog" :close-on-click-modal="false"
             :model-value="baTable.form.operate ? true : false" @close="baTable.toggleForm"
             width="30%"
  >
    <template #header>
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
        {{ baTable.form.operate ? baTable.form.operate == "edit" ? "编辑" : "添加" : "无标题" }}
      </div>
    </template>
    <el-scrollbar v-loading="baTable.form.loading">
      <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'"
           style="width: calc(100% - 40px);margin-bottom: 40px;">
        <el-form ref="formRef" @keyup.enter="baTable.onSubmit(formRef)" :model="baTable.form.items"
                 label-position="right" :label-width="'100px'" :rules="rules"
                 v-if="!baTable.form.loading">
          <el-form-item prop="adTitle" label="广告标题">
            <el-input v-model="baTable.form.items!.adTitle" placeholder="请输入">
            </el-input>
          </el-form-item>
          <el-form-item prop="adStatus" label="广告状态">
            <el-select v-model="baTable.form.items!.adStatus" placeholder="请选择" style="width: 100%">
              <el-option label="上架" :value="0"></el-option>
              <el-option label="下架" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="adUrl" label="上传图片">
            <pictureUpload v-model="baTable.form.items!.adUrl"></pictureUpload>
          </el-form-item>
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
        <el-button @click="baTable.toggleForm('')">取消</el-button>
        <el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)" type="primary">
          {{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? "保存并编辑下一项" : "保存" }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, inject, onMounted, watch } from "vue";

import type baTableClass from "/@/utils/baTable";
import type { ElForm, FormItemRule } from "element-plus";
import FormItem from "/@/components/formItem/index.vue";
import { ElNotification } from "element-plus/es";
import pictureUpload from "/@/components/pictureUpload/index.vue";
import request from "/@/api/request";
import { store } from "/@/api/controllerUrls";

const formRef = ref<InstanceType<typeof ElForm>>();
const baTable = inject("baTable") as baTableClass;


const rules: Partial<Record<string, FormItemRule[]>> = reactive({
  adStatus: [{ required: true, message: "请选择", trigger: "blur" }],
  adTitle: [{ required: true, message: "请选择", trigger: "blur" }],
  adUrl: [{ required: true, message: "请选择", trigger: "blur" }],
});



</script>

<style scoped lang="scss">
.avatar-uploader {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: var(--el-border-radius-small);
  box-shadow: var(--el-box-shadow-light);
  border: 1px dashed var(--color-sub-1);
  cursor: pointer;
  overflow: hidden;
  width: 110px;
  height: 110px;
}

.avatar-uploader:hover {
  border-color: var(--color-primary);
}

.avatar {
  width: 110px;
  height: 110px;
  display: block;
}

.image-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>