123

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>
@@ -116,6 +119,13 @@
       @dialogSuccess="dialogSuccess"
     >
     </AddSet>
+    <PzSet
+      :dialogVisible="dialogVisible3"
+      v-if="dialogVisible3"
+      @dialogClose="dialogClose3"
+      @dialogSuccess="dialogSuccess3"
+    >
+    </PzSet>
     <ViewSet :formData="formData" :dialogVisible="dialogVisible2"  v-if="dialogVisible2" @dialogClose="dialogClose"
       @dialogSuccess="dialogSuccess">
     </ViewSet>
@@ -128,12 +138,14 @@ 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";
 import ViewSet from "@/components/ViewSet.vue";
 export default {
   name: "page",
   components: {
     AddData,
     AddSet,
+    PzSet,
     ViewSet
   },
   setup() {
@@ -144,6 +156,7 @@ export default {
       dialogVisible: false,
       dialogVisible1: false,
       dialogVisible2: false,
+      dialogVisible3: false,
       type: '0' // 0新增 1 编辑
     });
 
@@ -178,11 +191,28 @@ export default {
 
     const dialogSuccess = () => {
       state.dialogVisible = false;
+      getTableData();
+    };
+
+    const dialogClose1 = () => {
+      state.dialogVisible1 = false;
+    };
+
+    const dialogClose3 = () => {
+      state.dialogVisible3 = false;
+    };
+    const dialogSuccess3 = () => {
+      state.dialogVisible3 = false;
+      getTableData();
+    };
+
+    const dialogSuccess1 = () => {
       state.dialogVisible1 = false;
       state.dialogVisible2 = false;
       getTableData();
     };
     
+
     const addData = () => {
       state.formData = {
         name: '',
@@ -247,6 +277,10 @@ export default {
       }
     };
 
+    const openPz = (item) => {
+      state.dialogVisible3 = true;
+    }
+
     return {
       ...toRefs(state),
       addData,
@@ -256,6 +290,11 @@ export default {
       dialogClose,
       dialogSuccess,
       changeStatus,
+      dialogClose1,
+      dialogSuccess1,
+      dialogClose3,
+      dialogSuccess3,
+      openPz,
       viewData
     };
   },