公司制度页面修改

src/views/people/company-rule.vue

@@ -1,10 +1,85 @@
 <!--  -->
 <template>
-  <div >333</div>
+  <HcCard>
+    <template #extra>
+            <HcUploadFile
+            :options="UploadFileOptions"
+            @progress="HcUploadFileProgress"
+            @success="HcUploadFileSuccess"
+            @change="HcUploadFileChange"
+        >
+            <el-button hc-btn type="primary">上传新制度</el-button>
+        </HcUploadFile>
+    </template>
+    <HcTable :column="tableColumn" :datas="tableData" >
+            <template #name="{row}">
+                        <div class="text-link text-blue"  @click="viewPdf(row)">{{row?.name}}</div>
+            </template>
+            <template #action="{row, index}">
+                <HcUploadFile
+                  :options="UploadFileOptions"
+                  @progress="HcUploadFileProgress"
+                  @success="HcUploadFileSuccess"
+                  @change="HcUploadFileChange"
+              >
+                  <el-button hc-btn type="primary">重新上传</el-button>
+              </HcUploadFile>
+            </template>
+      </HcTable>
+      <template #action>
+            <HcPages :pages="searchForm" @change="pageChange"></HcPages>
+      </template>
+  </HcCard>
 </template>
 
 <script setup>
 import {ref, watch} from  'vue'
+import {getTokenHeader} from "~src/api/request/header";
+
+const tableColumn = [
+    {key: 'name', name: '制度名称'},
+    {key: 'action', name: '操作', width: 120}
+
+]
+const tableData = ref([
+    {name: '名称1',},
+    {name: '名称2', },
+    {name: '名称3', }
+])
+const searchForm = ref({
+    name: '',
+    current: 1, size: 20, total: 0
+})
+//分页被点击
+const pageChange = ({current, size}) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+}
+
+
+//上传配置
+const UploadFileOptions = {
+    // 此处设置header
+    headers: getTokenHeader(),
+}
+
+// 文件上传进度
+const HcUploadFileProgress = (res) => {
+    console.log('文件上传进度', res)
+}
+// 文件上传成功的回调
+const HcUploadFileSuccess = (res) => {
+    console.log('文件上传成功', res)
+}
+
+// 文件全部上传成功
+const HcUploadFileChange = () => {
+    console.log('文件全部上传成功')
+}
+//查看pdf
+ const viewPdf=()=>{
+    window.open('http://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com//upload/20230606/c339aec388bab8c36d3272fe93bae350.pdf', '_blank')
+ }
 </script>
 <style lang='scss' scoped>
 </style>