111

src/components/PzSet.vue

@@ -0,0 +1,102 @@
+<template>
+  <el-drawer v-model="visible" title="配置管理" direction="rtl" :before-close="closeDialog">
+    <el-form :model="form" label-width="120px">
+      <el-form-item label="Activity name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="Activity zone">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="Activity time">
+        <el-col :span="11">
+          <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
+        </el-col>
+        <el-col :span="2" class="text-center">
+          <span class="text-gray-500">-</span>
+        </el-col>
+        <el-col :span="11">
+          <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
+        </el-col>
+      </el-form-item>
+      <el-form-item label="Instant delivery">
+        <el-switch v-model="form.delivery" />
+      </el-form-item>
+      <el-form-item label="Activity type">
+        <el-checkbox-group v-model="form.type">
+          <el-checkbox label="Online activities" name="type" />
+          <el-checkbox label="Promotion activities" name="type" />
+          <el-checkbox label="Offline activities" name="type" />
+          <el-checkbox label="Simple brand exposure" name="type" />
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="Resources">
+        <el-radio-group v-model="form.resource">
+          <el-radio label="Sponsor" />
+          <el-radio label="Venue" />
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="Activity form">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">保存</el-button>
+        <el-button>取消</el-button>
+      </el-form-item>
+    </el-form>
+  </el-drawer>
+</template>
+<script>
+import { onMounted, reactive, ref, toRefs, computed, nextTick } from "vue";
+import infoApi from "@/api/infoApi.js";
+import { ElMessage, ElMessageBox } from "element-plus";
+export default {
+  props: ["formData", "dialogVisible"],
+  emits: ["dialogClose", "dialogSuccess"],
+  setup(props, ctx) {
+    const ruleFormRef = ref(null);
+    const state = reactive({
+      form: {
+        name: '',
+        region: '',
+        date1: '',
+        date2: '',
+        delivery: false,
+        type: [],
+        resource: '',
+        desc: '',
+      }
+    });
+
+    const onSubmit = () => {
+      console.log('submit!')
+    }
+    const visible = computed(() => {
+      return props.dialogVisible;
+    });
+
+    onMounted(() => {
+
+    });
+    const closeDialog = () => {
+      ctx.emit("dialogClose");
+    };
+
+    const importData = () => { };
+
+    const exportData = () => { };
+
+    return {
+      ...toRefs(state),
+      visible,
+      closeDialog,
+      importData,
+      exportData
+
+    };
+  },
+};
+</script>
+<style lang="scss" scoped></style>

src/views/Page.vue

@@ -83,6 +83,9 @@
         </el-table-column>
         <el-table-column label="操作" align="center" show-overflow-tooltip>
           <template #default="scope">
+            <el-button type="primary" @click="openPz(scope.row)">
+              配置
+            </el-button>
             <el-button type="primary" @click="editData(scope.row)">
               编辑
             </el-button>
@@ -113,6 +116,13 @@
       @dialogSuccess="dialogSuccess1"
     >
     </AddSet>
+    <PzSet
+      :dialogVisible="dialogVisible2"
+      v-if="dialogVisible2"
+      @dialogClose="dialogClose2"
+      @dialogSuccess="dialogSuccess2"
+    >
+    </PzSet>
   </el-card>
 </template>
 
@@ -122,11 +132,13 @@ import infoApi from "@/api/infoApi.js";
 import { ElMessage, ElMessageBox } from "element-plus";
 import AddData from "@/components/AddData.vue";
 import AddSet from "@/components/AddSet.vue";
+import PzSet from "@/components/PzSet.vue";
 export default {
   name: "page",
   components: {
     AddData,
     AddSet,
+    PzSet
   },
   setup() {
     const state = reactive({
@@ -135,7 +147,8 @@ export default {
       formData: {},
       dialogVisible: false,
       dialogVisible1: false,
-      type: '0' // 0新增 1 编辑
+      dialogVisible2: false,// 配置弹框
+      type: '0', // 0新增 1 编辑
     });
 
     onMounted(() => {
@@ -173,11 +186,18 @@ export default {
     const dialogClose1 = () => {
       state.dialogVisible1 = false;
     };
+    const dialogClose2 = () => {
+      state.dialogVisible2 = false;
+    };
     
     const dialogSuccess1 = () => {
       state.dialogVisible1 = false;
       getTableData();
     };
+    const dialogSuccess2 = () => {
+      state.dialogVisible2 = false;
+      getTableData();
+    };
     const addData = () => {
       state.formData = {
         name: '',
@@ -237,6 +257,10 @@ export default {
       }
     };
 
+    const openPz = (item) => {
+      state.dialogVisible2 = true;
+    }
+
     return {
       ...toRefs(state),
       addData,
@@ -247,7 +271,10 @@ export default {
       dialogSuccess,
       changeStatus,
       dialogClose1,
-      dialogSuccess1
+      dialogSuccess1,
+      dialogClose2,
+      dialogSuccess2,
+      openPz
     };
   },
 };