feat: 合同管理前端页面

client/src/views/OaSystem/contractManagement/ContractChange/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <div class="oa-sys-list-view">
+      <div class="title">合同变更</div>
+      <Form :pageKey="pageKey" />
+      <Table :pageKey="pageKey" :request="request" :column="column" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import Form from '../components/Form.vue'
+import Table from '../components/Table.vue'
+/**
+ * @description 合同变更
+ */
+defineOptions({
+  name: 'ContractChange'
+})
+
+const pageKey = 'contract-change'
+const request = {
+  url: '',
+  params: {}
+}
+const column = [
+  {
+    label: '日期',
+    prop: 'date'
+  },
+  {
+    label: '合同编号',
+    prop: 'code'
+  },
+  {
+    label: '合同名称',
+    prop: 'name',
+    tooltip: true
+  },
+  {
+    label: '变更内容',
+    prop: 'content',
+    tooltip: true
+  },
+  {
+    label: '原合同金额（万元）',
+    prop: 'money'
+  },
+  {
+    label: '变更金额（万元）',
+    prop: 'changeMoney'
+  },
+  {
+    label: '变更原因',
+    prop: 'type',
+    tooltip: true
+  },
+  {
+    label: '备注',
+    prop: 'other',
+    tooltip: true
+  }
+]
+</script>
+<style scoped lang="scss">
+.oa-sys-list-view {
+  .title {
+    height: 32px;
+    font-weight: bold;
+    font-size: 24px;
+    color: #121518;
+    margin-bottom: 20px;
+  }
+}
+</style>

client/src/views/OaSystem/contractManagement/ContractDispute/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <div class="oa-sys-list-view">
+      <div class="title">合同纠纷</div>
+      <Form :pageKey="pageKey" />
+      <Table :pageKey="pageKey" :request="request" :column="column" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import Form from '../components/Form.vue'
+import Table from '../components/Table.vue'
+/**
+ * @description 合同纠纷
+ */
+defineOptions({
+  name: 'ContractDispute'
+})
+
+const pageKey = 'contract-dispute'
+const request = {
+  url: '',
+  params: {}
+}
+const column = [
+  {
+    label: '日期',
+    prop: 'date'
+  },
+  {
+    label: '合同编号',
+    prop: 'code'
+  },
+  {
+    label: '合同名称',
+    prop: 'name',
+    tooltip: true
+  },
+  {
+    label: '纠纷原因',
+    prop: 'content',
+    tooltip: true
+  },
+  {
+    label: '原合同金额（万元）',
+    prop: 'money'
+  },
+  {
+    label: '纠纷金额（万元）',
+    prop: 'changeMoney'
+  },
+  {
+    label: '解决争议方式',
+    prop: 'type',
+    tooltip: true
+  },
+  {
+    label: '备注',
+    prop: 'other',
+    tooltip: true
+  }
+]
+</script>
+<style scoped lang="scss">
+.oa-sys-list-view {
+  .title {
+    height: 32px;
+    font-weight: bold;
+    font-size: 24px;
+    color: #121518;
+    margin-bottom: 20px;
+  }
+}
+</style>

client/src/views/OaSystem/contractManagement/RescindContract/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <div class="oa-sys-list-view">
+      <div class="title">合同撤销</div>
+      <Form :pageKey="pageKey" />
+      <Table :pageKey="pageKey" :request="request" :column="column" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import Form from '../components/Form.vue'
+import Table from '../components/Table.vue'
+/**
+ * @description 合同撤销
+ */
+defineOptions({
+  name: 'RescindContract'
+})
+
+const pageKey = 'rescind-contract'
+const request = {
+  url: '',
+  params: {}
+}
+const column = [
+  {
+    label: '日期',
+    prop: 'date'
+  },
+  {
+    label: '合同编号',
+    prop: 'code'
+  },
+  {
+    label: '合同名称',
+    prop: 'name',
+    tooltip: true
+  },
+  {
+    label: '撤销原因',
+    prop: 'content',
+    tooltip: true
+  },
+  {
+    label: '原合同金额（万元）',
+    prop: 'money'
+  },
+  {
+    label: '撤销金额（万元）',
+    prop: 'changeMoney'
+  },
+  {
+    label: '撤销方式',
+    prop: 'type',
+    tooltip: true
+  },
+  {
+    label: '备注',
+    prop: 'other',
+    tooltip: true
+  }
+]
+</script>
+<style scoped lang="scss">
+.oa-sys-list-view {
+  .title {
+    height: 32px;
+    font-weight: bold;
+    font-size: 24px;
+    color: #121518;
+    margin-bottom: 20px;
+  }
+}
+</style>

client/src/views/OaSystem/contractManagement/TerminateContract/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <div class="oa-sys-list-view">
+      <div class="title">合同解除</div>
+      <Form :pageKey="pageKey" />
+      <Table :pageKey="pageKey" :request="request" :column="column" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import Form from '../components/Form.vue'
+import Table from '../components/Table.vue'
+/**
+ * @description 合同解除
+ */
+defineOptions({
+  name: 'TerminateContract'
+})
+
+const pageKey = 'terminate-contract'
+const request = {
+  url: '',
+  params: {}
+}
+const column = [
+  {
+    label: '日期',
+    prop: 'date'
+  },
+  {
+    label: '合同编号',
+    prop: 'code'
+  },
+  {
+    label: '合同名称',
+    prop: 'name',
+    tooltip: true
+  },
+  {
+    label: '解除原因',
+    prop: 'content',
+    tooltip: true
+  },
+  {
+    label: '原合同金额（万元）',
+    prop: 'money'
+  },
+  {
+    label: '解除金额（万元）',
+    prop: 'changeMoney'
+  },
+  {
+    label: '解除方式',
+    prop: 'type',
+    tooltip: true
+  },
+  {
+    label: '备注',
+    prop: 'other',
+    tooltip: true
+  }
+]
+</script>
+<style scoped lang="scss">
+.oa-sys-list-view {
+  .title {
+    height: 32px;
+    font-weight: bold;
+    font-size: 24px;
+    color: #121518;
+    margin-bottom: 20px;
+  }
+}
+</style>

client/src/views/OaSystem/contractManagement/TerminationOfContract/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <div class="oa-sys-list-view">
+      <div class="title">合同中止</div>
+      <Form :pageKey="pageKey" />
+      <Table :pageKey="pageKey" :request="request" :column="column" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import Form from '../components/Form.vue'
+import Table from '../components/Table.vue'
+/**
+ * @description 合同中止
+ */
+defineOptions({
+  name: 'TerminationOfContract'
+})
+
+const pageKey = 'termination-Of-contract'
+const request = {
+  url: '',
+  params: {}
+}
+const column = [
+  {
+    label: '日期',
+    prop: 'date'
+  },
+  {
+    label: '合同编号',
+    prop: 'code'
+  },
+  {
+    label: '合同名称',
+    prop: 'name',
+    tooltip: true
+  },
+  {
+    label: '终止原因',
+    prop: 'content',
+    tooltip: true
+  },
+  {
+    label: '原合同金额（万元）',
+    prop: 'money'
+  },
+  {
+    label: '终止金额（万元）',
+    prop: 'changeMoney'
+  },
+  {
+    label: '备注',
+    prop: 'other',
+    tooltip: true
+  }
+]
+</script>
+<style scoped lang="scss">
+.oa-sys-list-view {
+  .title {
+    height: 32px;
+    font-weight: bold;
+    font-size: 24px;
+    color: #121518;
+    margin-bottom: 20px;
+  }
+}
+</style>

client/src/views/OaSystem/contractManagement/components/Form.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-form :inline="true" class="searchBox">
+    <el-form-item label="合同日期:" class="form">
+      <el-date-picker
+        v-model="queryParams.date"
+        type="date"
+        placeholder="请选择月份"
+        :clearable="false"
+      />
+    </el-form-item>
+    <el-form-item label="合同编号" class="form">
+      <el-input v-model="queryParams.code" clearable />
+    </el-form-item>
+    <el-form-item label="合同名称" class="form project-name">
+      <el-input v-model="queryParams.name" clearable />
+    </el-form-item>
+    <el-form-item class="search-button">
+      <el-button type="primary" :icon="Search" @click="onSearchHandle">查询</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+<script lang="ts" setup>
+/**
+ * @description 查询表单
+ */
+
+import { Search } from '@element-plus/icons-vue'
+import moment from 'moment'
+import PubsubService from '@/utils/PubsubService'
+
+interface IProps {
+  pageKey: string // 页面的唯一标识
+}
+const { pageKey } = defineProps<IProps>()
+
+interface IQuery {
+  date: string // 合同日期
+  code: string // 合同编号
+  name: string // 合同名称
+}
+const queryParams = reactive<IQuery>({
+  date: moment().format('YYYY-MM-DD'),
+  code: '',
+  name: ''
+})
+
+// 查询
+const onSearchHandle: () => void = () => {
+  queryParams.date = moment(queryParams.date).format('YYYY-MM-DD')
+  const params = { ...queryParams }
+  // 发布查询事件
+  PubsubService.publish(pageKey, params)
+  // onSearch?.(queryParams)
+}
+</script>
+
+<style scoped lang="scss">
+.project-name {
+  width: 400px !important;
+}
+.search-button {
+  display: flex;
+  margin: 5px 0;
+  align-items: center;
+  flex-shrink: 0;
+}
+</style>

client/src/views/OaSystem/contractManagement/components/Table.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="tableBox">
+    <div class="table" ref="tableRef">
+      <el-table
+        stripe
+        :data="dataSource"
+        :style="{ height: tableHeight ? tableHeight + 'px' : '500px' }"
+        v-loading="loading"
+        :header-cell-style="{
+          background: '#E5F0FB',
+          color: '#233755',
+          height: '50px'
+        }"
+      >
+        <el-table-column label="序号" width="60" align="center" v-if="showIndex">
+          <template #default="scope">{{ scope.$index + 1 }}</template>
+        </el-table-column>
+        <el-table-column
+          v-for="item in column"
+          :key="item.prop"
+          :prop="item.prop"
+          :label="item.label"
+          :width="item.width"
+          :align="item.align"
+        />
+      </el-table>
+    </div>
+    <div class="pageBox" v-if="dataSource.length > 0">
+      <el-pagination
+        :page-size="20"
+        background
+        layout="total, prev, pager, next"
+        :total="pageTotal"
+        :current-page="pageNo"
+        @current-change="currentChange"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import http from '@/config/axios'
+import PubsubService from '@/utils/PubsubService'
+
+interface ITable {
+  pageKey: string // 页面的唯一标识
+  request: {
+    url: string
+    params: any
+  }
+  column: {
+    // 表格属性
+    label: string
+    prop: string
+    width?: string | number
+    align?: string
+    tooltip?: boolean
+  }[]
+  showIndex?: boolean // 是否显示表格序号
+}
+
+const props = defineProps<ITable>()
+const { pageKey, request, column, showIndex } = props
+
+const loading = ref(false)
+const dataSource = ref([])
+const pageNo = ref(1)
+const pageTotal = ref(0)
+
+const tableRef: any = ref(null)
+const tableHeight: any = ref(0)
+
+const updateTableHeight = () => {
+  if (tableRef.value) {
+    tableHeight.value = tableRef.value.clientHeight
+  }
+}
+
+onMounted(() => {
+  updateTableHeight()
+  window.addEventListener('resize', updateTableHeight)
+
+  // 初始化
+  getDataSource()
+  // 接收查询事件
+  PubsubService.subscribe(pageKey, (params) => {
+    getDataSource(params)
+  })
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateTableHeight)
+})
+
+// 获取数据
+const getDataSource = (params = {}) => {
+  if (!request.url || request.url == '') return
+  loading.value = true
+  http
+    .get({
+      url: request.url,
+      params: { ...request.params, ...params, pageNo: pageNo.value, pageSize: 20 }
+    })
+    .then((res) => {
+      ElMessage.success(`数据查询成功`)
+      loading.value = false
+      const { list, total } = res
+      dataSource.value = list
+      pageTotal.value = total
+      pageNo.value = 1
+    })
+    .catch(() => {
+      ElMessage.error('查询失败，请稍后重试！')
+      loading.value = false
+    })
+}
+// 切换页面
+const currentChange = (page) => {
+  pageNo.value = page
+  getDataSource()
+}
+</script>
+<style scoped lang="scss">
+.tableBox {
+  margin-top: 10px;
+}
+.pageBox {
+  margin-top: 10px;
+}
+</style>