政策法规

src/styles/app/element.scss

@@ -0,0 +1,12 @@
+//表格右边悬浮的样式
+.hc-table-ref-box .el-table__body-wrapper tr td {
+    &.el-table-fixed-column--right {
+        background: #ebeef0 !important;
+        border-color: #d6d6d6;
+    }
+    .cell {
+        .el-button + .el-button {
+            margin-left: 10px;
+        }
+    }
+}

src/views/base/policy.vue

@@ -1,15 +1,200 @@
 <template>
-    <div>222</div>
+    <HcCard>
+        <template #header>
+            <div class="w-36">
+                <el-select v-model="searchForm.projectType" block clearable placeholder="请选择区域" size="large">
+                    <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
+                </el-select>
+            </div>
+            <div class="w-36 ml-4">
+                <el-date-picker class="block" v-model="searchForm.startTime" type="date" value-format="YYYY-MM-DD" placeholder="开始日期" clearable size="large"/>
+            </div>
+            <div class="mx-2">~</div>
+            <div class="w-36">
+                <el-date-picker class="block" v-model="searchForm.endTime" type="date" value-format="YYYY-MM-DD" placeholder="结束日期" clearable size="large"/>
+            </div>
+            <div class="w-48 ml-2">
+                <el-input v-model="searchForm.queryValue" clearable placeholder="请输入名称进行查询" size="large"/>
+            </div>
+            <div class="ml-4">
+                <el-button type="primary" @click="searchClick" size="large">
+                    <HcIcon name="search-2"/>
+                    <span>搜索</span>
+                </el-button>
+            </div>
+        </template>
+        <template #extra>
+            <el-button size="large" type="primary" hc-btn @click="addRowClick">
+                <HcIcon name="add"/>
+                <span>新增</span>
+            </el-button>
+            <el-button size="large" type="danger" hc-btn>
+                <HcIcon name="delete-bin"/>
+                <span>删除</span>
+            </el-button>
+        </template>
+        <HcTable :column="tableColumn" :datas="tableData" :loading="tableLoading" isCheck @selection-change="tableSelectionChange">
+            <template #action="{row,index}">
+                <el-button size="small" type="warning">查看附件</el-button>
+                <el-button size="small" type="primary" @click="editRowClick(row)">编辑</el-button>
+                <el-button size="small" type="danger">删除</el-button>
+            </template>
+        </HcTable>
+        <template #action>
+            <HcPages :pages="searchForm" @change="pageChange"/>
+        </template>
+
+        <!--新增/编辑-->
+        <HcDialog isToBody bgColor="white" :show="rowModal" title="这是测试弹窗" widths="62rem" @save="rowModalSave" @close="rowModalClose">
+            <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto" size="large">
+                <div class="flex">
+                    <div class="flex-1 mr-4">
+                        <el-form-item label="编号" prop="key">
+                            <el-input v-model="formModel.key"/>
+                        </el-form-item>
+                        <el-form-item label="名称" prop="key1">
+                            <el-input v-model="formModel.key1"/>
+                        </el-form-item>
+                        <el-form-item label="所属区域：" prop="key2">
+                            <el-select block v-model="formModel.key2">
+                                <el-option label="选项1" value="选项1"/>
+                                <el-option label="选项2" value="选项2"/>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="多个文件">
+                            <HcFormUpload :src="formModel.key4" @item="formItemClick" @upload="formItemUpload" @change="formItemChange"/>
+                        </el-form-item>
+                    </div>
+                    <div class="flex-1 ml-4">
+                        <el-form-item label="备注：">
+                            <el-input type="textarea" v-model="formModel.key3" :autosize="{ minRows: 6, maxRows: 10 }"/>
+                        </el-form-item>
+                    </div>
+                </div>
+            </el-form>
+        </HcDialog>
+
+        <HcUploadFile ref="HcUploadFileRef" :options="UploadFileOptions" @success="HcUploadFileSuccess"/>
+    </HcCard>
 </template>
 
 <script setup>
+import {ref} from "vue";
+import {useRouter} from 'vue-router'
+import {getTokenHeader} from "~src/api/request/header";
 
-</script>
+const router = useRouter()
+
+//上传配置
+const HcUploadFileRef = ref(null)
+const UploadFileOptions = {
+    headers: getTokenHeader()
+}
+
+//项目类型
+const projectType = ref([
+    {name: '二级路', key: '二级路'},
+    {name: '国道', key: '国道'},
+    {name: '水利水电', key: '水利水电'},
+    {name: '市政', key: '市政'},
+])
+
+//搜索表单
+const searchForm = ref({
+    projectType: null, queryValue: null, startTime: null, endTime: null,
+    current: 1, size: 20, total: 0
+})
+
+//搜索
+const searchClick = () => {
+    searchForm.value.current = 1;
+    getTableData()
+}
+
+//分页被点击
+const pageChange = ({current, size}) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+    getTableData()
+}
+
+//获取数据
+const tableLoading = ref(false)
+const tableColumn = [
+    {key: 'key', name: '编号', width: '120'},
+    {key: 'key1', name: '名称'},
+    {key: 'key2', name: '上传日期', width: '140', align: 'center'},
+    {key: 'key3', name: '备注', width: '200', isTooltip: true},
+    {key: 'action', name: '操作', width: '220', align: 'center'},
+]
+const tableData = ref([
+    {id: 1, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: ''},
+    {id: 2, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: ''},
+    {id: 3, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: ''},
+    {id: 4, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: ''},
+    {id: 5, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: ''},
+    {id: 6, key: 'YS-01', key1: 'xxxx', key2: 'xxxx', key3: '65632', key4: ''},
+])
+
+const getTableData = () => {
 
-<style lang="scss" scoped>
+}
 
-</style>
+//多选事件
+const tableSelectionChange = (rows) => {
+    console.log(rows)
+}
 
-<style lang="scss">
+//弹窗
+const rowModal = ref(false)
+const formRef = ref(null)
+const formModel = ref({})
+const formRules = {
+    key: [{required: true, message: '请输入编号', trigger: 'blur'}],
+    key1: [{required: true, message: '请输入名称', trigger: 'blur'}],
+    key2: [{required: true, message: '请选择所属区域', trigger: 'change'}],
+    key3: [{required: true, message: '请输入备注', trigger: 'blur'}],
+}
 
-</style>
+//新增
+const addRowClick = () => {
+    formModel.value = {}
+    rowModal.value = true
+}
+
+//编辑
+const editRowClick = (row) => {
+    formModel.value = row
+    rowModal.value = true
+}
+
+//保存
+const rowModalSave = () => {
+
+}
+
+//关闭弹窗
+const rowModalClose = () => {
+    rowModal.value = false
+    formModel.value = {}
+}
+
+//上传
+const formItemUpload = () => {
+    HcUploadFileRef.value?.selectFile();
+}
+
+// 文件上传成功的回调
+const HcUploadFileSuccess = (res) => {
+    console.log('文件上传成功', res)
+}
+
+const formItemClick = ({item, index}) => {
+
+}
+
+//文件变化
+const formItemChange = (src) => {
+    formModel.value.key5 = src
+}
+</script>