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'

src/view/components/new-activity-drawer.vue

@@ -9,10 +9,23 @@
     <n-drawer-content>
       <template #header>
         <div class="head">
-          <p>新增活动</p>
+          <p>{{ mode ? basicData.name : '新增活动' }}</p>
           <n-space>
-            <n-button size="tiny" @click="closeDrawer(false)">取消</n-button>
-            <n-button type="primary" size="tiny" @click="submit">完成</n-button>
+            <n-button size="small" @click="closeDrawer(false)">取消</n-button>
+            <template v-if="mode === 'view'">
+              <n-button type="error" size="small" @click="mode = 'modify'">
+                编辑
+              </n-button>
+              <n-button type="primary" size="small" @click="submit">
+                <n-icon size=".1rem">
+                  <svg-icon :data="exportIcon" original />
+                </n-icon>
+                导出
+              </n-button>
+            </template>
+            <n-button v-else type="primary" size="small" @click="submit">
+              完成
+            </n-button>
           </n-space>
         </div>
       </template>
@@ -28,27 +41,43 @@
           >
             <n-grid :cols="24" :x-gap="12">
               <n-form-item-gi :span="12" label="活动名称" path="name">
-                <n-input v-model:value="basicData.name" />
+                <p v-if="mode === 'view'">{{ basicData.name }}</p>
+                <n-input v-else v-model:value="basicData.name" />
               </n-form-item-gi>
               <n-form-item-gi :span="12" label="标签类别" path="type">
+                <p v-if="mode === 'view'">
+                  {{
+                    typeOptions.find((e) => e.value === basicData.type)?.label
+                  }}
+                </p>
                 <n-select
+                  v-else
                   v-model:value="basicData.type"
                   :options="typeOptions"
                 />
               </n-form-item-gi>
               <n-form-item-gi
                 :span="12"
-                label="党组织名称（下拉选择或输入关键字选择）"
+                label="党组织名称（下拉或输入关键字选择）"
                 path="orgName"
               >
+                <p v-if="mode === 'view'">
+                  {{
+                    typeOptions.find((e) => e.value === basicData.orgName)
+                      ?.label
+                  }}
+                </p>
                 <n-select
+                  v-else
                   v-model:value="basicData.orgName"
                   :options="typeOptions"
+                  filterable
                 />
               </n-form-item-gi>
               <n-form-item-gi :span="12" label="活动日期" path="date">
                 <n-date-picker
                   v-model:value="basicData.date"
+                  :disabled="mode === 'view'"
                   style="width: 100%"
                 />
               </n-form-item-gi>
@@ -57,7 +86,8 @@
                 label="活动地址（请具体填写，如“XX区XX路XX号XX中心”）"
                 path="address"
               >
-                <n-input v-model:value="basicData.address" />
+                <p v-if="mode === 'view'">{{ basicData.address }}</p>
+                <n-input v-else v-model:value="basicData.address" />
               </n-form-item-gi>
             </n-grid>
           </n-form>
@@ -73,7 +103,9 @@
           >
             <n-grid :cols="24" :x-gap="12">
               <n-form-item-gi :span="12" label="实际参与人数" path="count">
+                <p v-if="mode === 'view'">{{ memberData.count }}</p>
                 <n-input-number
+                  v-else
                   v-model:value="memberData.count"
                   size="small"
                   :show-button="false"
@@ -87,7 +119,9 @@
                 label="不计入参与活动党员人数"
                 path="excludeCount"
               >
+                <p v-if="mode === 'view'">{{ memberData.excludeCount }}</p>
                 <n-input-number
+                  v-else
                   v-model:value="memberData.excludeCount"
                   size="small"
                   :show-button="false"
@@ -97,11 +131,18 @@
                 </n-input-number>
               </n-form-item-gi>
               <n-form-item-gi
-                :span="12"
+                :span="24"
                 label="电子表格或签到照片（大小20M以内）"
                 path="fileType"
               >
+                <p v-if="mode === 'view'">
+                  {{
+                    fileOptions.find((e) => e.value === memberData.fileType)
+                      ?.label
+                  }}
+                </p>
                 <n-select
+                  v-else
                   v-model:value="memberData.fileType"
                   :options="fileOptions"
                   placeholder="请选择上传类型"
@@ -111,12 +152,7 @@
                 <n-upload
                   style="width: 100%"
                   action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
-                  :headers="{
-                    'naive-info': 'hello!',
-                  }"
-                  :data="{
-                    'naive-data': 'cool! naive!',
-                  }"
+                  accept=".docx,.doc,.xlsx,.xls,.csv,.txt"
                 >
                   <n-button> 上传附件 </n-button>
                 </n-upload>
@@ -126,6 +162,7 @@
                   style="width: 100%"
                   action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
                   :default-file-list="previewFileList"
+                  accept="image/jpg,image/jpeg,image/png,image/img"
                   list-type="image-card"
                   @preview="handlePreview"
                 >
@@ -148,9 +185,16 @@
               <n-form-item-gi
                 :span="24"
                 label="活动内容描述或照片（大小20M以内）"
-                path="count"
+                path="fileType"
               >
+                <p v-if="mode === 'view'">
+                  {{
+                    fileOptions.find((e) => e.value === memberData.fileType)
+                      ?.label
+                  }}
+                </p>
                 <n-select
+                  v-else
                   v-model:value="detailData.fileType"
                   :options="fileOptions"
                   placeholder="请选择上传类型"
@@ -160,12 +204,7 @@
                 <n-upload
                   style="width: 100%"
                   action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
-                  :headers="{
-                    'naive-info': 'hello!',
-                  }"
-                  :data="{
-                    'naive-data': 'cool! naive!',
-                  }"
+                  accept=".docx,.doc,.xlsx,.xls,.csv,.txt"
                 >
                   <n-button> 上传附件 </n-button>
                 </n-upload>
@@ -175,6 +214,7 @@
                   style="width: 100%"
                   action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
                   :default-file-list="previewFileList"
+                  accept="image/jpg,image/jpeg,image/png,image/img"
                   list-type="image-card"
                   @preview="handlePreview"
                 >
@@ -190,6 +230,7 @@
                   style="width: 100%"
                   action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
                   :default-file-list="previewFileList"
+                  accept="image/jpg,image/jpeg,image/png,image/img"
                   list-type="image-card"
                   @preview="handlePreview"
                 >
@@ -214,7 +255,17 @@
 
 <script lang="ts" setup>
 import store from '@/store'
-import { computed, ref } from 'vue'
+import { computed, PropType, ref, watch } from 'vue'
+import { NForm } from 'naive-ui'
+import exportIcon from '@images/export.svg'
+
+const props = defineProps({
+  data: {
+    type: Object as PropType<{ [key: string]: any }>,
+    default: null,
+  },
+})
+const mode = ref<string | null>(null)
 
 const show = computed(() => store.state.showNewActivityDrawer)
 const closeDrawer = () => store.commit('SET_NEW_ACTIVITY_DRAWER', false)
@@ -224,16 +275,46 @@ const typeOptions = [
   { label: '类型2', value: 'type2' },
 ]
 const fileOptions = [
-  { label: '电子表格', value: 'file' },
-  { label: '照片', value: 'photo' },
+  { label: '电子表格（docx、doc、xlsx、xls、csv、txt）', value: 'file' },
+  { label: '描述照片（jpg、jpeg、png、img）', value: 'photo' },
 ]
 
-const basicRef = ref<HTMLElement | null>(null)
-const memberRef = ref<HTMLElement | null>(null)
-const detailRef = ref<HTMLElement | null>(null)
+const basicRef = ref<typeof NForm | null>(null)
+const memberRef = ref<typeof NForm | null>(null)
+const detailRef = ref<typeof NForm | null>(null)
 const basicData = ref({})
 const memberData = ref({})
 const detailData = ref({})
+
+watch(
+  () => props.data,
+  (data) => {
+    if (!data) {
+      basicData.value = {}
+      memberData.value = {}
+      detailData.value = {}
+      return
+    }
+    basicData.value = {
+      name: data.name,
+      type: data.type,
+      orgName: data.orgName,
+      date: data.date,
+      address: data.address,
+    }
+    memberData.value = {
+      count: data.count,
+      excludeCount: data.excludeCount,
+      fileType: data.fileType,
+    }
+    detailData.value = {
+      fileType: data.fileType,
+    }
+    mode.value = data._mode || null
+  },
+  { immediate: true },
+)
+
 const rules = {
   name: {
     required: true,
@@ -282,6 +363,15 @@ const rules = {
 
 const submit = () => {
   console.log(basicData.value, memberData.value, detailData.value)
+  let noMistake = true
+  basicRef.value?.validate((errors: any) => errors && (noMistake = false))
+  memberRef.value?.validate((errors: any) => errors && (noMistake = false))
+  detailRef.value?.validate((errors: any) => errors && (noMistake = false))
+
+  if (noMistake) {
+    // TODO 请求提交数据
+    console.log(basicData.value, memberData.value, detailData.value)
+  }
 }
 
 const previewFileList = ref([
@@ -319,6 +409,9 @@ function handlePreview(file: any) {
   background #f7f7f7
   padding .08rem .1rem
   box-sizing border-box
+  p
+    font-size .11rem
+    padding-left .02rem
   >div
     background $white-bg
     border-radius .04rem