view & modify page of activity

src/App.vue

@@ -34,19 +34,26 @@ const themeOverrides: GlobalThemeOverrides = {
   },
   Button: {
     paddingTiny: '.03rem .1rem',
+    paddingSmall: '.03rem .16rem',
+    borderRadiusSmall: '.05rem',
     textColorHover: '#dd505E',
     textColorPressed: '#dd505E',
     textColorFocus: '#dd505E',
+    borderHover: '#dd505E',
+    borderPressed: '#dd505E',
+    borderFocus: '#dd505E',
     colorHoverPrimary: '#faadbb',
     colorPressedPrimary: '#dd505E',
     colorFocusPrimary: '#dd505E',
     textColorHoverPrimary: '#dd505E',
-    borderHover: '#dd505E',
-    borderPressed: '#dd505E',
-    borderFocus: '#dd505E',
     borderHoverPrimary: '#dd505E',
     borderPressedPrimary: '#dd505E',
     borderFocusPrimary: '#dd505E',
+    colorError: '#faadbb',
+    textColorError: '#dd505E',
+    borderError: '#dd505E',
+    borderHoverError: '#dd505E',
+    borderPressedError: '#dd505E',
   },
   Input: {
     borderFocus: '#FCF4F5',
@@ -88,6 +95,7 @@ const themeOverrides: GlobalThemeOverrides = {
   Form: {
     feedbackTextColorError: '#E59B00',
     labelTextColor: '#6E798C',
+    labelFontSizeTopSmall: '.09rem',
   },
 }
 </script>

src/view/components/activity-list-modal.vue

@@ -57,7 +57,11 @@
             />
           </n-form-item>
           <n-form-item>
-            <n-button color="#dd505e" text-color="#fff" @click="openNewDrawer">
+            <n-button
+              color="#dd505e"
+              text-color="#fff"
+              @click="openNewDrawer(null)"
+            >
               <n-icon size=".1rem">
                 <Add />
               </n-icon>
@@ -82,11 +86,16 @@
     preset="dialog"
     title="操作确认"
     content="请确认是否删除?"
-    positive-text="确定"
-    negative-text="取消"
     @positive-click="sureToDelete"
-  />
-  <NewActivityDrawer />
+  >
+    <template #action>
+      <n-space>
+        <div class="btn cancel" @click="deleteConfirm = false">取消</div>
+        <div class="btn sure" @click="sureToDelete">确定</div>
+      </n-space>
+    </template>
+  </n-modal>
+  <NewActivityDrawer :data="activityData" />
 </template>
 
 <script lang="ts" setup>
@@ -109,10 +118,24 @@ const typeOptions = [
   { label: '类型1', value: 'type1' },
   { label: '类型2', value: 'type2' },
 ]
-const openNewDrawer = () => {
+
+const mockData = {
+  name: '某某活动',
+  type: '某某标签',
+  orgName: '某某党组织',
+  date: 1630425600000,
+  address: '某区某路XX号XX中心',
+  count: 20,
+  excludeCount: 10,
+  fileType: 'file',
+}
+const activityData = ref<any>(null)
+const openNewDrawer = (data: any = null) => {
   console.log(model.value)
+  activityData.value = data
   store.commit('SET_NEW_ACTIVITY_DRAWER', true)
 }
+
 const deleteConfirm = ref(false)
 const curRow = ref<any>(null)
 const columns = [
@@ -151,7 +174,7 @@ const columns = [
               color: 'transparent',
               tag: 'a',
               textColor: '#3d7fe9',
-              onClick: () => console.log(row),
+              onClick: () => openNewDrawer({ ...mockData, _mode: 'view' }),
             },
             { default: () => '查看' },
           ),
@@ -163,7 +186,7 @@ const columns = [
               color: 'transparent',
               tag: 'a',
               textColor: '#3d7fe9',
-              onClick: () => console.log(row),
+              onClick: () => openNewDrawer({ ...mockData, _mode: 'modify' }),
             },
             { default: () => '修改' },
           ),
@@ -314,6 +337,7 @@ const pagination = {
 }
 
 const sureToDelete = () => {
+  deleteConfirm.value = false
   console.log(curRow.value)
   message.success('删除成功')
 }
@@ -336,6 +360,19 @@ const sureToDelete = () => {
     padding .08rem
     .activity-table
       font-size .08rem
+.btn
+  font-size .1rem
+  box-sizing border-box
+  padding .03rem .2rem
+  border-radius .03rem
+  cursor pointer
+  &:hover
+    box-shadow 0 0 .06rem rgba(0,0,0,0.3)
+  &.cancel
+    border .01rem solid $light-gray
+  &.sure
+    color #fff
+    background $blue
 </style>
 <style lang="stylus">
 @import '../../components/MyComponent/main.styl'