资金

src/views/contract/division/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="p-2">
+    <el-tabs type="border-card" @tab-change="handleTabChange">
+      <el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label">
+        <el-card shadow="always">
+          <el-form :model="form" :inline="true" ref="queryFormRef">
+            <el-form-item label="名称" prop="versions">
+              <el-input v-model="form.name" placeholder="请输入名称" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="内容" prop="sheet">
+              <el-input v-model="form.content" placeholder="请输入内容" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+              <el-button type="primary" plain :icon="Plus">新增</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+        <el-table :data="tableData" row-key="id" border>
+          <el-table-column prop="num" label="编号" />
+          <el-table-column prop="name" label="名称" />
+          <el-table-column prop="specification" label="规格" />
+          <el-table-column prop="unit" label="单位" />
+          <el-table-column prop="quantity" label="数量" />
+          <el-table-column prop="remark" label="备注" />
+        </el-table>
+        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getDicts } from '@/api/system/dict/data';
+import { Plus } from '@element-plus/icons-vue';
+
+const tabList = ref<any[]>([]);
+const tableData = ref<any[]>([]);
+const queryFormRef = ref();
+
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 10
+});
+const total = ref(0);
+const form = ref({
+  name: '',
+  content: ''
+});
+//字典获取数据
+const getTabsList = async () => {
+  const res = await getDicts('subcontracting_type');
+  if (res.code == 200) {
+    tabList.value = res.data.map((item: any) => {
+      return {
+        label: item.dictLabel,
+        value: item.dictValue
+      };
+    });
+  }
+};
+//获取表格数据
+const getList = () => {};
+const handleTabChange = () => {};
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+onMounted(() => {
+  getTabsList();
+});
+</script>
+
+<style scoped></style>