动态传值

src/components/cus/CusForm.vue

@@ -20,7 +20,7 @@ import {
   ComponentInternalInstance,
   toRefs,
   nextTick,
-  provide
+  provide, readonly
 } from 'vue'
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
@@ -41,7 +41,11 @@ export default defineComponent({
     const state = reactive({})
     const ref_cusForm: any = ref(null)
     provide('element-loading-background', props.elementLoadingBackground)
-    provide('form-view', props.formView)
+    let _formView: any = ref(props.formView)
+    watch(() => props.formView, (n) => {
+      _formView.value = n
+    })
+    provide('form-view', _formView)
     const submit = () => {
       return new Promise((resolve, reject) => {
         const nodes: any = [];

src/views/system/daily-manage/detail.vue

@@ -0,0 +1,117 @@
+<template>
+  <CusDialog
+      title="日志"
+      :show="show"
+      @close="$emit('update:show', false)"
+      @submit="onSubmit"
+      height="560px"
+      :closeConfirm="!isViewCpt"
+  >
+    <div class="__normal-form">
+      <CusForm labelWidth="100px" ref="ref_form" :formView="isViewCpt">
+        <CusFormColumn
+            :span="24"
+            required
+            label="日志标题:"
+            v-model:param="cusDetail.p1"/>
+        <CusFormColumn
+            :span="24"
+            required
+            label="值班时间:"
+            link="datetime"
+            type="datetimerange"
+            v-model:param="cusDetail.p1"/>
+        <CusFormColumn
+            :span="24"
+            required
+            label="值班员:"
+            v-model:param="cusDetail.p1"/>
+        <CusFormColumn
+            :span="24"
+            required
+            label="值班记录:"
+            type="textarea"
+            :rows="8"
+            v-model:param="cusDetail.p2"/>
+        <CusFormColumn
+            :span="24"
+            label="上传文件:"
+            link="upload"
+            v-model:param="cusDetail.fileList"/>
+      </CusForm>
+    </div>
+  </CusDialog>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {
+    show: {},
+    transfer: <any>{}
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      cusDetail: {
+        p1: null,
+        p2: null,
+        p3: null,
+        fileList: [
+          { "url": "http://8.140.240.182:18085/profile/upload/2023/10/23/6b7bf3b4-592a-4e2f-ba92-11923671ce3b.doc", "name": "迁移案例.doc"},],
+        }
+    })
+    watch(() => props.show, (n) => {
+      if (n) {
+        state.cusDetail = {
+          p1: null,
+          p2: null,
+          p3: null,
+          fileList: [],
+        }
+        if (props.transfer.method !== 'add') {
+          state.cusDetail.p1 = props.transfer.detail.p1
+          state.cusDetail.fileList = props.transfer.detail.fileList
+        }
+        nextTick(() => {
+          ref_form.value.reset()
+        })
+      }
+    })
+    const ref_form = ref()
+    const isViewCpt = computed(() => {
+      return props.transfer.method === 'view'
+    })
+    const onSubmit = () => {
+    }
+    return {
+      ...toRefs(state),
+      onSubmit,
+      isViewCpt,
+      ref_form
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/system/daily-manage/index.vue

@@ -1,4 +1,72 @@
 <template>
+  <div class="__normal-page">
+    <div class="__normal-content">
+      <CusContent
+          v-model:tableHead="tableHead"
+          @handleReset="handleReset"
+          @handleSearch="onSearch"
+      >
+        <template #fieldOut>
+          <CusForm labelWidth="100px" @handleEnter="onSearch">
+            <CusFormColumn
+                label="席位编号:"
+                v-model:param="queryForm.shipId"/>
+            <CusFormColumn
+                label="单位:"
+                v-model:param="queryForm.shipId"/>
+            <CusFormColumn
+                label="值班员:"
+                v-model:param="queryForm.shipId"/>
+            <CusFormColumn
+                label="签卡时间:"
+                link="datetime"
+                type="datetimerange"
+                v-model:param="queryForm.shipId"/>
+            <CusSearchButtons
+                @handleReset="handleReset"
+                @handleSearch="onSearch"
+            />
+          </CusForm>
+        </template>
+        <template #buttons>
+          <div class="__cus-button_submit __hover" @click="onAdd">
+            <SvgIcon name="add" size="16"/>新增
+          </div>
+        </template>
+        <template #table>
+          <CusTable
+              v-loading="loading"
+              ref="ref_cusTable"
+              :tableData="queryResult.tableData"
+              :tableHead="tableHead"
+              :total="queryResult.total"
+              :page="queryPage.pageNum"
+              :pageSize="queryPage.pageSize"
+              @handlePage="handlePage"
+              @handleSort="handleSort"
+          >
+            <template #do-column-value="{ scope }">
+              <div class="__cus-table_do">
+                <div class="__cus-table_do-green __hover" @click="onView(scope.row)">
+                  <SvgIcon name="add" size="16"/>查看
+                </div>
+                <div class="__cus-table_do-blue __hover" @click="onEdit(scope.row)">
+                  <SvgIcon name="edit" size="16"/>编辑
+                </div>
+<!--                <div class="__cus-table_do-green __hover">-->
+<!--                  <SvgIcon name="publish" size="16"/>发布-->
+<!--                </div>-->
+                <div class="__cus-table_do-red __hover">
+                  <SvgIcon name="del" size="16"/>删除
+                </div>
+              </div>
+            </template>
+          </CusTable>
+        </template>
+      </CusContent>
+    </div>
+    <DetailCom v-model:show="showDetail" :transfer="transfer"/>
+  </div>
 </template>
 
 <script lang="ts">
@@ -16,18 +84,162 @@ import {
 } from 'vue'
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
+import DetailCom from './detail.vue'
 
 export default defineComponent({
   name: '',
-  components: {},
+  components: {
+    DetailCom
+  },
   setup(props, {emit}) {
     const store = useStore();
     const router = useRouter();
     const route = useRoute();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
-    const state = reactive({})
+    const state = reactive({
+      //  加载中
+      loading: false,
+      //  查询分页参数
+      queryPage: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      //  查询结果
+      queryResult: {
+        total: 0,
+        tableData: []
+      },
+      //  查询表单参数
+      queryForm: <any>{},
+      //  查询表单参数备份
+      back_queryForm: {},
+      //  查询表格排序
+      querySort: {},
+      //  表格表头
+      tableHead: [
+        {value: "p1", label: "标题", show: true},
+        {value: "p1", label: "日志标题", show: true},
+        {value: "p1", label: "单位", show: true},
+        {value: "p1", label: "席位编号", show: true},
+        {value: "p1", label: "提交人员", show: true},
+        {value: "p1", label: "值班时间", show: true},
+        {value: "p1", label: "提交时间", show: true},
+        {value: "do", label: "操作", show: true, width: 260},
+      ],
+      showDetail: false,
+      transfer: {}
+    });
+    const ref_cusTable = ref()
+    //  获取字典
+    const initDictionary = () => {
+    }
+    //  查询分页参数改变处理方法
+    const handlePage = ({page, pageSize}: any) => {
+      state.queryPage.pageNum = page
+      state.queryPage.pageSize = pageSize
+      handleSearch(page, pageSize)
+    }
+    //  查询排序参数改变处理方法
+    const handleSort = ({key, value}: any) => {
+      state.querySort = key ? {key: value} : {}
+      handleSearch()
+    }
+    //  重置查询表单方法
+    const handleReset = () => {
+      state.queryForm = {}
+      state.back_queryForm = state.queryForm
+      handleSearch()
+    }
+    //  查询方法
+    const handleSearch = (page = 1, pageSize = 10) => {
+      //  添加分页参数
+      const queryParams: any = {
+        pageNum: page,
+        pageSize: pageSize,
+        sort: {},
+        text: ''
+      }
+      //  添加排序参数
+      for (const [k, v] of Object.entries(state.querySort)) {
+        that.$util.isValue(v) ? (queryParams.sort[k] = v) : null;
+      }
+      //  添加表单参数
+      for (const [k, v] of Object.entries(state.back_queryForm)) {
+        that.$util.isValue(v) ? (queryParams[k] = v) : null;
+      }
+      //  添加复合查询参数
+      state.loading = true
+
+      // mock
+      const arr: any = []
+      for (let i = 0; i < 77; i++) {
+        arr.push({
+          p1: '阿三顶顶顶顶顶顶顶顶顶顶顶顶顶' + i,
+          fileList: [
+            { "url": "http://8.140.240.182:18085/profile/upload/2023/10/23/6b7bf3b4-592a-4e2f-ba92-11923671ce3b.doc", "name": "迁移案例.doc"},
+          ],
+        })
+      }
+      state.queryResult.tableData = arr
+      state.queryResult.total = arr.length
+      state.loading = false
+      // that.$api.patrolBoatList(that.$util.formatGetParam(queryParams)).then((res: { code: number; rows: never[]; total: number; }) => {
+      //   if (res.code === 200) {
+      //     state.queryResult.tableData = res.rows
+      //     state.queryResult.total = res.total
+      //   }
+      //   setTimeout(() => {
+      //     state.loading = false
+      //   }, 1000)
+      // }).catch(() => {
+      //   setTimeout(() => {
+      //     state.loading = false
+      //   }, 1000)
+      // })
+    }
+    //  点击查询按钮后
+    const onSearch = () => {
+      ref_cusTable.value.resetFilter()
+      state.back_queryForm = state.queryForm
+      state.queryPage.pageNum = 1
+      handleSearch()
+    }
+    const onAdd = () => {
+      state.transfer = {
+        method: 'add',
+      }
+      state.showDetail = true
+    }
+    const onEdit = (val) => {
+      state.transfer = {
+        method: 'edit',
+        detail: val
+      }
+      state.showDetail = true
+    }
+    const onView = (val) => {
+      state.transfer = {
+        method: 'view',
+        detail: val
+      }
+      state.showDetail = true
+    }
+    onMounted(() => {
+      state.back_queryForm = JSON.parse(JSON.stringify(state.queryForm))
+      initDictionary()
+      handleSearch()
+    })
     return {
-      ...toRefs(state)
+      ref_cusTable,
+      ...toRefs(state),
+      handleSearch,
+      handlePage,
+      handleSort,
+      handleReset,
+      onSearch,
+      onAdd,
+      onEdit,
+      onView,
     }
   },
 })

src/views/system/notice-announcement/detail.vue

@@ -9,29 +9,23 @@
       :closeConfirm="!isViewCpt"
   >
     <div class="__normal-form">
-      <CusForm labelWidth="100px" ref="ref_form">
+      <CusForm labelWidth="100px" ref="ref_form" :formView="isViewCpt">
         <CusFormColumn
-            :disabled="isViewCpt"
             :span="24"
             required
             label="标题:"
-            defaultErrorMsg="请输入标题"
             v-model:param="cusDetail.p1"/>
         <CusFormColumn
-            :disabled="isViewCpt"
             :span="24"
             required
             label="内容:"
-            defaultErrorMsg="请输入内容"
             type="textarea"
             :rows="8"
             v-model:param="cusDetail.p2"/>
         <CusFormColumn
-            :disabled="isViewCpt"
             :span="24"
             required
             label="操作类型:"
-            defaultErrorMsg="请选择操作类型"
             link="select"
             static
             v-model:param="cusDetail.p3"
@@ -43,10 +37,8 @@
                 {label: '类型三', value: '3'},
             ]"/>
         <CusFormColumn
-            :view="isViewCpt"
             :span="24"
             label="上传文件:"
-            defaultErrorMsg="请选择文件"
             link="upload"
             v-model:param="cusDetail.fileList"/>
       </CusForm>

src/views/system/weekly-manage/detail.vue

@@ -0,0 +1,117 @@
+<template>
+  <CusDialog
+      title="日志"
+      :show="show"
+      @close="$emit('update:show', false)"
+      @submit="onSubmit"
+      height="560px"
+      :closeConfirm="!isViewCpt"
+  >
+    <div class="__normal-form">
+      <CusForm labelWidth="100px" ref="ref_form" :formView="isViewCpt">
+        <CusFormColumn
+            :span="24"
+            required
+            label="日志标题:"
+            v-model:param="cusDetail.p1"/>
+        <CusFormColumn
+            :span="24"
+            required
+            label="值班时间:"
+            link="datetime"
+            type="datetimerange"
+            v-model:param="cusDetail.p1"/>
+        <CusFormColumn
+            :span="24"
+            required
+            label="值班员:"
+            v-model:param="cusDetail.p1"/>
+        <CusFormColumn
+            :span="24"
+            required
+            label="值班记录:"
+            type="textarea"
+            :rows="8"
+            v-model:param="cusDetail.p2"/>
+        <CusFormColumn
+            :span="24"
+            label="上传文件:"
+            link="upload"
+            v-model:param="cusDetail.fileList"/>
+      </CusForm>
+    </div>
+  </CusDialog>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {
+    show: {},
+    transfer: <any>{}
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      cusDetail: {
+        p1: null,
+        p2: null,
+        p3: null,
+        fileList: [
+          { "url": "http://8.140.240.182:18085/profile/upload/2023/10/23/6b7bf3b4-592a-4e2f-ba92-11923671ce3b.doc", "name": "迁移案例.doc"},],
+        }
+    })
+    watch(() => props.show, (n) => {
+      if (n) {
+        state.cusDetail = {
+          p1: null,
+          p2: null,
+          p3: null,
+          fileList: [],
+        }
+        if (props.transfer.method !== 'add') {
+          state.cusDetail.p1 = props.transfer.detail.p1
+          state.cusDetail.fileList = props.transfer.detail.fileList
+        }
+        nextTick(() => {
+          ref_form.value.reset()
+        })
+      }
+    })
+    const ref_form = ref()
+    const isViewCpt = computed(() => {
+      return props.transfer.method === 'view'
+    })
+    const onSubmit = () => {
+    }
+    return {
+      ...toRefs(state),
+      onSubmit,
+      isViewCpt,
+      ref_form
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/system/weekly-manage/index.vue

@@ -1,4 +1,72 @@
 <template>
+  <div class="__normal-page">
+    <div class="__normal-content">
+      <CusContent
+          v-model:tableHead="tableHead"
+          @handleReset="handleReset"
+          @handleSearch="onSearch"
+      >
+        <template #fieldOut>
+          <CusForm labelWidth="100px" @handleEnter="onSearch">
+            <CusFormColumn
+                label="席位编号:"
+                v-model:param="queryForm.shipId"/>
+            <CusFormColumn
+                label="单位:"
+                v-model:param="queryForm.shipId"/>
+            <CusFormColumn
+                label="值班员:"
+                v-model:param="queryForm.shipId"/>
+            <CusFormColumn
+                label="签卡时间:"
+                link="datetime"
+                type="datetimerange"
+                v-model:param="queryForm.shipId"/>
+            <CusSearchButtons
+                @handleReset="handleReset"
+                @handleSearch="onSearch"
+            />
+          </CusForm>
+        </template>
+        <template #buttons>
+          <div class="__cus-button_submit __hover" @click="onAdd">
+            <SvgIcon name="add" size="16"/>新增
+          </div>
+        </template>
+        <template #table>
+          <CusTable
+              v-loading="loading"
+              ref="ref_cusTable"
+              :tableData="queryResult.tableData"
+              :tableHead="tableHead"
+              :total="queryResult.total"
+              :page="queryPage.pageNum"
+              :pageSize="queryPage.pageSize"
+              @handlePage="handlePage"
+              @handleSort="handleSort"
+          >
+            <template #do-column-value="{ scope }">
+              <div class="__cus-table_do">
+                <div class="__cus-table_do-green __hover" @click="onView(scope.row)">
+                  <SvgIcon name="add" size="16"/>查看
+                </div>
+                <div class="__cus-table_do-blue __hover" @click="onEdit(scope.row)">
+                  <SvgIcon name="edit" size="16"/>编辑
+                </div>
+<!--                <div class="__cus-table_do-green __hover">-->
+<!--                  <SvgIcon name="publish" size="16"/>发布-->
+<!--                </div>-->
+                <div class="__cus-table_do-red __hover">
+                  <SvgIcon name="del" size="16"/>删除
+                </div>
+              </div>
+            </template>
+          </CusTable>
+        </template>
+      </CusContent>
+    </div>
+    <DetailCom v-model:show="showDetail" :transfer="transfer"/>
+  </div>
 </template>
 
 <script lang="ts">
@@ -16,18 +84,162 @@ import {
 } from 'vue'
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
+import DetailCom from './detail.vue'
 
 export default defineComponent({
   name: '',
-  components: {},
+  components: {
+    DetailCom
+  },
   setup(props, {emit}) {
     const store = useStore();
     const router = useRouter();
     const route = useRoute();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
-    const state = reactive({})
+    const state = reactive({
+      //  加载中
+      loading: false,
+      //  查询分页参数
+      queryPage: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      //  查询结果
+      queryResult: {
+        total: 0,
+        tableData: []
+      },
+      //  查询表单参数
+      queryForm: <any>{},
+      //  查询表单参数备份
+      back_queryForm: {},
+      //  查询表格排序
+      querySort: {},
+      //  表格表头
+      tableHead: [
+        {value: "p1", label: "标题", show: true},
+        {value: "p1", label: "日志标题", show: true},
+        {value: "p1", label: "单位", show: true},
+        {value: "p1", label: "席位编号", show: true},
+        {value: "p1", label: "提交人员", show: true},
+        {value: "p1", label: "值班时间", show: true},
+        {value: "p1", label: "提交时间", show: true},
+        {value: "do", label: "操作", show: true, width: 260},
+      ],
+      showDetail: false,
+      transfer: {}
+    });
+    const ref_cusTable = ref()
+    //  获取字典
+    const initDictionary = () => {
+    }
+    //  查询分页参数改变处理方法
+    const handlePage = ({page, pageSize}: any) => {
+      state.queryPage.pageNum = page
+      state.queryPage.pageSize = pageSize
+      handleSearch(page, pageSize)
+    }
+    //  查询排序参数改变处理方法
+    const handleSort = ({key, value}: any) => {
+      state.querySort = key ? {key: value} : {}
+      handleSearch()
+    }
+    //  重置查询表单方法
+    const handleReset = () => {
+      state.queryForm = {}
+      state.back_queryForm = state.queryForm
+      handleSearch()
+    }
+    //  查询方法
+    const handleSearch = (page = 1, pageSize = 10) => {
+      //  添加分页参数
+      const queryParams: any = {
+        pageNum: page,
+        pageSize: pageSize,
+        sort: {},
+        text: ''
+      }
+      //  添加排序参数
+      for (const [k, v] of Object.entries(state.querySort)) {
+        that.$util.isValue(v) ? (queryParams.sort[k] = v) : null;
+      }
+      //  添加表单参数
+      for (const [k, v] of Object.entries(state.back_queryForm)) {
+        that.$util.isValue(v) ? (queryParams[k] = v) : null;
+      }
+      //  添加复合查询参数
+      state.loading = true
+
+      // mock
+      const arr: any = []
+      for (let i = 0; i < 77; i++) {
+        arr.push({
+          p1: '阿三顶顶顶顶顶顶顶顶顶顶顶顶顶' + i,
+          fileList: [
+            { "url": "http://8.140.240.182:18085/profile/upload/2023/10/23/6b7bf3b4-592a-4e2f-ba92-11923671ce3b.doc", "name": "迁移案例.doc"},
+          ],
+        })
+      }
+      state.queryResult.tableData = arr
+      state.queryResult.total = arr.length
+      state.loading = false
+      // that.$api.patrolBoatList(that.$util.formatGetParam(queryParams)).then((res: { code: number; rows: never[]; total: number; }) => {
+      //   if (res.code === 200) {
+      //     state.queryResult.tableData = res.rows
+      //     state.queryResult.total = res.total
+      //   }
+      //   setTimeout(() => {
+      //     state.loading = false
+      //   }, 1000)
+      // }).catch(() => {
+      //   setTimeout(() => {
+      //     state.loading = false
+      //   }, 1000)
+      // })
+    }
+    //  点击查询按钮后
+    const onSearch = () => {
+      ref_cusTable.value.resetFilter()
+      state.back_queryForm = state.queryForm
+      state.queryPage.pageNum = 1
+      handleSearch()
+    }
+    const onAdd = () => {
+      state.transfer = {
+        method: 'add',
+      }
+      state.showDetail = true
+    }
+    const onEdit = (val) => {
+      state.transfer = {
+        method: 'edit',
+        detail: val
+      }
+      state.showDetail = true
+    }
+    const onView = (val) => {
+      state.transfer = {
+        method: 'view',
+        detail: val
+      }
+      state.showDetail = true
+    }
+    onMounted(() => {
+      state.back_queryForm = JSON.parse(JSON.stringify(state.queryForm))
+      initDictionary()
+      handleSearch()
+    })
     return {
-      ...toRefs(state)
+      ref_cusTable,
+      ...toRefs(state),
+      handleSearch,
+      handlePage,
+      handleSort,
+      handleReset,
+      onSearch,
+      onAdd,
+      onEdit,
+      onView,
     }
   },
 })