lipj

gw-ui/src/views/slaj/woas/BisWoasExpert.vue

@@ -1,49 +1,75 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px">
-      <el-form-item label="专家名称" prop="expertName">
-        <el-input v-model="queryParams.expertName" placeholder="请输入专家名称" clearable style="width: 200px" @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-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['woas:expert:add']">新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['woas:expert:edit']">修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['woas:expert:remove']">删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['woas:expert:export']">导出</el-button>
-      </el-col>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns" storageKey="woas-woas-expert-index"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="专家名称" align="center" prop="expertName" v-if="columns.expertName.visible" :show-overflow-tooltip="true" />
-      <el-table-column label="操作" align="center" class-name="BisWoasExpert" width="200">
-        <template #default="scope">
-          <el-tooltip content="修改" placement="top">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['woas:expert:edit']"></el-button>
-          </el-tooltip>
-          <el-tooltip content="删除" placement="top">
-            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['woas:expert:remove']"></el-button>
-          </el-tooltip>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
-
-    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
+  <div class="system-page config-page">
+    <el-card class="page-card">
+      <template #header>
+        <div class="card-header">
+          <div class="header-left">
+            <el-icon :size="20" color="#409EFF"><UserFilled /></el-icon>
+            <span class="page-title">考核专家</span>
+          </div>
+          <div class="search-right">
+            <el-button type="primary" v-hasPermi="['woas:expert:add']" @click="handleAdd">
+              <el-icon><Plus /></el-icon> 新增
+            </el-button>
+            <el-button type="success" v-hasPermi="['woas:expert:edit']" :disabled="single" @click="handleUpdate()">
+              <el-icon><Edit /></el-icon> 修改
+            </el-button>
+            <el-button type="danger" v-hasPermi="['woas:expert:remove']" :disabled="multiple" @click="handleDelete()">
+              <el-icon><Delete /></el-icon> 删除
+            </el-button>
+            <el-button type="warning" v-hasPermi="['woas:expert:export']" @click="handleExport">
+              <el-icon><Download /></el-icon> 导出
+            </el-button>
+          </div>
+        </div>
+      </template>
+
+      <!-- 搜索栏 -->
+      <div class="search-bar" v-show="showSearch">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+          <el-form-item label="专家名称" prop="expertName">
+            <el-input v-model="queryParams.expertName" placeholder="请输入专家名称" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handleQuery">
+              <el-icon><Search /></el-icon> 搜索
+            </el-button>
+            <el-button @click="resetQuery">
+              <el-icon><RefreshRight /></el-icon> 重置
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 数据列表 -->
+      <el-table v-loading="loading" :data="dataList" style="width: 100%" border @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="45" />
+        <el-table-column label="专家名称" align="center" prop="expertName" :show-overflow-tooltip="true" />
+        <el-table-column label="操作" align="center" width="150" fixed="right">
+          <template #default="{ row }">
+            <el-button link type="primary" v-hasPermi="['woas:expert:edit']" @click="handleUpdate(row)"> 编辑 </el-button>
+            <el-button link type="danger" v-hasPermi="['woas:expert:remove']" @click="handleDelete(row)"> 删除 </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination">
+        <el-pagination
+          v-show="total > 0"
+          v-model:current-page="queryParams.pageNum"
+          v-model:page-size="queryParams.pageSize"
+          :total="total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="getList"
+          @current-change="getList"
+        />
+      </div>
+    </el-card>
+
+    <!-- 新增/编辑对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="600px" top="5vh" append-to-body @close="cancel">
       <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
         <el-form-item label="工作考核GUID" prop="woasGuid">
           <el-input v-model="form.woasGuid" placeholder="请输入工作考核GUID" />
@@ -62,127 +88,248 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
+        <el-button @click="dialog.visible = false">取消</el-button>
+        <el-button type="primary" @click="submitForm">确定</el-button>
       </template>
     </el-dialog>
   </div>
 </template>
 
-<script setup name="WoasExpert">
-import { listWoasExpert, getWoasExpert, addWoasExpert, updateWoasExpert, delWoasExpert } from "@/api/slaj/woas";
-import { getCurrentInstance, reactive, ref, toRefs } from "vue";
-
-const { proxy } = getCurrentInstance();
-
-const dataList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const title = ref("");
-
-const columns = ref({
-    expertName: { visible: true }
-});
-
-const data = reactive({
-  form: {},
-  queryParams: { pageNum: 1, pageSize: 10, expertName: null },
+<script setup name="BisWoasExpert" lang="ts">
+import { listWoasExpert, getWoasExpert, addWoasExpert, updateWoasExpert, delWoasExpert } from '@/api/slaj/woas'
+import { Plus, Edit, Delete, Download, Search, RefreshRight, UserFilled } from '@element-plus/icons-vue'
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance
+
+const dataList = ref<any[]>([])
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref<Array<string | number>>([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+
+const queryFormRef = ref<ElFormInstance>()
+const formRef = ref<ElFormInstance>()
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+})
+
+const initFormData: any = {
+  guid: null,
+  woasGuid: null,
+  bisWoasGropGuid: null,
+  expertGuid: null,
+  expertName: null,
+  note: null
+}
+
+const data = reactive<PageData<any, any>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    expertName: null
+  },
   rules: {}
-});
+})
 
-const { form, queryParams, rules } = toRefs(data);
+const { queryParams, form, rules } = toRefs(data)
 
-function getList() {
-  loading.value = true;
-  listWoasExpert(queryParams.value).then(response => {
-    dataList.value = response.rows;
-    total.value = response.total;
-    loading.value = false;
-  });
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  const res = await listWoasExpert(queryParams.value)
+  dataList.value = res.rows
+  total.value = res.total
+  loading.value = false
 }
 
-function handleQuery() {
-  queryParams.value.pageNum = 1;
-  getList();
+/** 取消按钮 */
+const cancel = () => {
+  reset()
+  dialog.visible = false
 }
 
-function resetQuery() {
-  proxy.resetForm("queryRef");
-  handleQuery();
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData }
+  formRef.value?.resetFields()
 }
 
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.guid);
-  single.value = selection.length !== 1;
-  multiple.value = !selection.length;
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1
+  getList()
 }
 
-function handleAdd() {
-  reset();
-  open.value = true;
-  title.value = "添加考核专家";
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields()
+  handleQuery()
 }
 
-function handleUpdate(row) {
-  reset();
-  const guid = row.guid || ids.value[0];
-  getWoasExpert(guid).then(response => {
-    form.value = response.data;
-    open.value = true;
-    title.value = "修改考核专家";
-  });
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: any[]) => {
+  ids.value = selection.map((item) => item.guid)
+  single.value = selection.length !== 1
+  multiple.value = !selection.length
 }
 
-function submitForm() {
-  proxy.$refs["formRef"].validate(valid => {
-    if (valid) {
-      if (form.value.guid != null) {
-        updateWoasExpert(form.value).then(() => {
-          proxy.$modal.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
-      } else {
-        addWoasExpert(form.value).then(() => {
-          proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
-      }
-    }
-  });
+/** 新增按钮操作 */
+const handleAdd = () => {
+  reset()
+  dialog.visible = true
+  dialog.title = '添加考核专家'
 }
 
-function handleDelete(row) {
-  const guids = row.guid || ids.value.join(",");
-  proxy.$modal.confirm('是否确认删除所选数据？').then(function() {
-    return delWoasExpert(guids);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  });
+/** 修改按钮操作 */
+const handleUpdate = async (row?: any) => {
+  reset()
+  const guid = row?.guid || ids.value[0]
+  const res = await getWoasExpert(guid)
+  Object.assign(form.value, res.data)
+  dialog.visible = true
+  dialog.title = '修改考核专家'
 }
 
-function handleExport() {
-  proxy.download('/woas/expert/export', { ...queryParams.value }, `考核专家_${new Date().getTime()}.xlsx`);
+/** 提交按钮 */
+const submitForm = () => {
+  formRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      form.value.guid ? await updateWoasExpert(form.value) : await addWoasExpert(form.value)
+      proxy?.$modal.msgSuccess('操作成功')
+      dialog.visible = false
+      await getList()
+    }
+  })
 }
 
-function cancel() {
-  open.value = false;
-  reset();
+/** 删除按钮操作 */
+const handleDelete = async (row?: any) => {
+  const guids = row?.guid || ids.value
+  await proxy?.$modal.confirm('是否确认删除所选数据？')
+  await delWoasExpert(guids)
+  await getList()
+  proxy?.$modal.msgSuccess('删除成功')
 }
 
-function reset() {
-  form.value = { guid: null, woasGuid: null, bisWoasGropGuid: null, expertGuid: null, expertName: null, note: null };
-  proxy.resetForm("formRef");
+/** 导出按钮操作 */
+const handleExport = () => {
+  proxy?.download('/woas/expert/export', { ...queryParams.value }, `考核专家_${new Date().getTime()}.xlsx`)
 }
 
-getList();
+onMounted(() => {
+  getList()
+})
 </script>
+
+<style scoped lang="scss">
+.system-page {
+  padding: 0px;
+  background-color: #f5f7fa;
+  min-height: calc(100vh - 10px);
+
+  :deep(.el-input__wrapper) {
+    border-radius: 4px;
+  }
+
+  :deep(.el-textarea__inner) {
+    border-radius: 4px;
+  }
+
+  .page-card {
+    border-radius: 1px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+
+    :deep(.el-card__header) {
+      padding: 15px 20px;
+      border-bottom: 1px solid #ebeef5;
+      background-color: #fff;
+      border-radius: 8px 8px 0 0;
+    }
+
+    :deep(.el-card__body) {
+      padding: 20px;
+      background-color: #fff;
+    }
+  }
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+      .page-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #303133;
+      }
+    }
+
+    .search-right {
+      display: flex;
+      gap: 10px;
+    }
+  }
+
+  .search-bar {
+    margin-bottom: 10px;
+    background-color: #f8faff;
+    padding: 6px 10px;
+    border-radius: 6px;
+    border: 0px solid #e6ebf5;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    :deep(.el-form) {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+
+      .el-form-item {
+        margin-bottom: 0;
+        margin-right: 15px;
+
+        .el-form-item__label {
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  .pagination {
+    margin-top: 8px;
+    margin-bottom: 8px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  :deep(.el-table) {
+    border-radius: 4px;
+    overflow: auto;
+    height: calc(100vh - 195px);
+
+    th.el-table__cell {
+      background-color: #f5f7fa !important;
+      color: #606266;
+      font-weight: 600;
+    }
+
+    .el-button--primary.is-link {
+      color: #409eff;
+    }
+
+    .el-button--danger.is-link {
+      color: #f56c6c;
+    }
+  }
+}
+</style>

gw-ui/src/views/slaj/woas/BisWoasGrop.vue

@@ -1,52 +1,82 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px">
-      <el-form-item label="考核组名称" prop="woasGropName">
-        <el-input v-model="queryParams.woasGropName" placeholder="请输入考核组名称" clearable style="width: 200px" @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-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['woas:grop:add']">新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['woas:grop:edit']">修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['woas:grop:remove']">删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['woas:grop:export']">导出</el-button>
-      </el-col>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns" storageKey="woas-woas-grop-index"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="考核组名称" align="center" prop="woasGropName" v-if="columns.woasGropName.visible" :show-overflow-tooltip="true" />
-      <el-table-column label="考核组长单位名称" align="center" prop="leadWiun" v-if="columns.leadWiun.visible" :show-overflow-tooltip="true" />
-      <el-table-column label="考核模式" align="center" prop="asseMode" v-if="columns.asseMode.visible" :show-overflow-tooltip="true" />
-      <el-table-column label="出发时间" align="center" prop="depaTime" v-if="columns.depaTime.visible" :show-overflow-tooltip="true" />
-      <el-table-column label="操作" align="center" class-name="BisWoasGrop" width="200">
-        <template #default="scope">
-          <el-tooltip content="修改" placement="top">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['woas:grop:edit']"></el-button>
-          </el-tooltip>
-          <el-tooltip content="删除" placement="top">
-            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['woas:grop:remove']"></el-button>
-          </el-tooltip>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
-
-    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
+  <div class="system-page config-page">
+    <el-card class="page-card">
+      <template #header>
+        <div class="card-header">
+          <div class="header-left">
+            <el-icon :size="20" color="#409EFF"><Team /></el-icon>
+            <span class="page-title">考核组</span>
+          </div>
+          <div class="search-right">
+            <el-button type="primary" v-hasPermi="['woas:grop:add']" @click="handleAdd">
+              <el-icon><Plus /></el-icon> 新增
+            </el-button>
+            <el-button type="success" v-hasPermi="['woas:grop:edit']" :disabled="single" @click="handleUpdate()">
+              <el-icon><Edit /></el-icon> 修改
+            </el-button>
+            <el-button type="danger" v-hasPermi="['woas:grop:remove']" :disabled="multiple" @click="handleDelete()">
+              <el-icon><Delete /></el-icon> 删除
+            </el-button>
+            <el-button type="warning" v-hasPermi="['woas:grop:export']" @click="handleExport">
+              <el-icon><Download /></el-icon> 导出
+            </el-button>
+          </div>
+        </div>
+      </template>
+
+      <!-- 搜索栏 -->
+      <div class="search-bar" v-show="showSearch">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+          <el-form-item label="考核组名称" prop="woasGropName">
+            <el-input v-model="queryParams.woasGropName" placeholder="请输入考核组名称" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handleQuery">
+              <el-icon><Search /></el-icon> 搜索
+            </el-button>
+            <el-button @click="resetQuery">
+              <el-icon><RefreshRight /></el-icon> 重置
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 数据列表 -->
+      <el-table v-loading="loading" :data="dataList" style="width: 100%" border @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="45" />
+        <el-table-column label="考核组名称" align="center" prop="woasGropName" :show-overflow-tooltip="true" />
+        <el-table-column label="考核组长单位名称" align="center" prop="leadWiun" :show-overflow-tooltip="true" />
+        <el-table-column label="考核模式" align="center" prop="asseMode" :show-overflow-tooltip="true" />
+        <el-table-column label="出发时间" align="center" prop="depaTime" width="180">
+          <template #default="{ row }">
+            {{ proxy.parseTime(row.depaTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="150" fixed="right">
+          <template #default="{ row }">
+            <el-button link type="primary" v-hasPermi="['woas:grop:edit']" @click="handleUpdate(row)"> 编辑 </el-button>
+            <el-button link type="danger" v-hasPermi="['woas:grop:remove']" @click="handleDelete(row)"> 删除 </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination">
+        <el-pagination
+          v-show="total > 0"
+          v-model:current-page="queryParams.pageNum"
+          v-model:page-size="queryParams.pageSize"
+          :total="total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="getList"
+          @current-change="getList"
+        />
+      </div>
+    </el-card>
+
+    <!-- 新增/编辑对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="600px" top="5vh" append-to-body @close="cancel">
       <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
         <el-form-item label="考核组名称" prop="woasGropName">
           <el-input v-model="form.woasGropName" placeholder="请输入考核组名称" />
@@ -80,130 +110,253 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
+        <el-button @click="dialog.visible = false">取消</el-button>
+        <el-button type="primary" @click="submitForm">确定</el-button>
       </template>
     </el-dialog>
   </div>
 </template>
 
-<script setup name="WoasGrop">
-import { listWoasGrop, getWoasGrop, addWoasGrop, updateWoasGrop, delWoasGrop } from "@/api/slaj/woas";
-import { getCurrentInstance, reactive, ref, toRefs } from "vue";
-
-const { proxy } = getCurrentInstance();
-
-const dataList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const title = ref("");
-
-const columns = ref({
-    woasGropName: { visible: true },
-    leadWiun: { visible: true },
-    asseMode: { visible: true },
-    depaTime: { visible: true }
-});
-
-const data = reactive({
-  form: {},
-  queryParams: { pageNum: 1, pageSize: 10, woasGropName: null },
+<script setup name="BisWoasGrop" lang="ts">
+import { listWoasGrop, getWoasGrop, addWoasGrop, updateWoasGrop, delWoasGrop } from '@/api/slaj/woas'
+import { Plus, Edit, Delete, Download, Search, RefreshRight, Team } from '@element-plus/icons-vue'
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance
+
+const dataList = ref<any[]>([])
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref<Array<string | number>>([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+
+const queryFormRef = ref<ElFormInstance>()
+const formRef = ref<ElFormInstance>()
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+})
+
+const initFormData: any = {
+  guid: null,
+  woasGropName: null,
+  woasGuid: null,
+  assePlanGuid: null,
+  leadOrgGuid: null,
+  leadWiun: null,
+  asseMode: null,
+  asseRout: null,
+  depaTime: null,
+  schePathDetl: null,
+  note: null
+}
+
+const data = reactive<PageData<any, any>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    woasGropName: null
+  },
   rules: {}
-});
+})
 
-const { form, queryParams, rules } = toRefs(data);
+const { queryParams, form, rules } = toRefs(data)
 
-function getList() {
-  loading.value = true;
-  listWoasGrop(queryParams.value).then(response => {
-    dataList.value = response.rows;
-    total.value = response.total;
-    loading.value = false;
-  });
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  const res = await listWoasGrop(queryParams.value)
+  dataList.value = res.rows
+  total.value = res.total
+  loading.value = false
 }
 
-function handleQuery() {
-  queryParams.value.pageNum = 1;
-  getList();
+/** 取消按钮 */
+const cancel = () => {
+  reset()
+  dialog.visible = false
 }
 
-function resetQuery() {
-  proxy.resetForm("queryRef");
-  handleQuery();
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData }
+  formRef.value?.resetFields()
 }
 
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.guid);
-  single.value = selection.length !== 1;
-  multiple.value = !selection.length;
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1
+  getList()
 }
 
-function handleAdd() {
-  reset();
-  open.value = true;
-  title.value = "添加考核组";
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields()
+  handleQuery()
 }
 
-function handleUpdate(row) {
-  reset();
-  const guid = row.guid || ids.value[0];
-  getWoasGrop(guid).then(response => {
-    form.value = response.data;
-    open.value = true;
-    title.value = "修改考核组";
-  });
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: any[]) => {
+  ids.value = selection.map((item) => item.guid)
+  single.value = selection.length !== 1
+  multiple.value = !selection.length
 }
 
-function submitForm() {
-  proxy.$refs["formRef"].validate(valid => {
-    if (valid) {
-      if (form.value.guid != null) {
-        updateWoasGrop(form.value).then(() => {
-          proxy.$modal.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
-      } else {
-        addWoasGrop(form.value).then(() => {
-          proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
-      }
-    }
-  });
+/** 新增按钮操作 */
+const handleAdd = () => {
+  reset()
+  dialog.visible = true
+  dialog.title = '添加考核组'
 }
 
-function handleDelete(row) {
-  const guids = row.guid || ids.value.join(",");
-  proxy.$modal.confirm('是否确认删除所选数据？').then(function() {
-    return delWoasGrop(guids);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  });
+/** 修改按钮操作 */
+const handleUpdate = async (row?: any) => {
+  reset()
+  const guid = row?.guid || ids.value[0]
+  const res = await getWoasGrop(guid)
+  Object.assign(form.value, res.data)
+  dialog.visible = true
+  dialog.title = '修改考核组'
 }
 
-function handleExport() {
-  proxy.download('/woas/grop/export', { ...queryParams.value }, `考核组_${new Date().getTime()}.xlsx`);
+/** 提交按钮 */
+const submitForm = () => {
+  formRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      form.value.guid ? await updateWoasGrop(form.value) : await addWoasGrop(form.value)
+      proxy?.$modal.msgSuccess('操作成功')
+      dialog.visible = false
+      await getList()
+    }
+  })
 }
 
-function cancel() {
-  open.value = false;
-  reset();
+/** 删除按钮操作 */
+const handleDelete = async (row?: any) => {
+  const guids = row?.guid || ids.value
+  await proxy?.$modal.confirm('是否确认删除所选数据？')
+  await delWoasGrop(guids)
+  await getList()
+  proxy?.$modal.msgSuccess('删除成功')
 }
 
-function reset() {
-  form.value = { guid: null, woasGropName: null, woasGuid: null, assePlanGuid: null, leadOrgGuid: null, leadWiun: null, asseMode: null, asseRout: null, depaTime: null, schePathDetl: null, note: null };
-  proxy.resetForm("formRef");
+/** 导出按钮操作 */
+const handleExport = () => {
+  proxy?.download('/woas/grop/export', { ...queryParams.value }, `考核组_${new Date().getTime()}.xlsx`)
 }
 
-getList();
+onMounted(() => {
+  getList()
+})
 </script>
+
+<style scoped lang="scss">
+.system-page {
+  padding: 0px;
+  background-color: #f5f7fa;
+  min-height: calc(100vh - 10px);
+
+  :deep(.el-input__wrapper) {
+    border-radius: 4px;
+  }
+
+  :deep(.el-textarea__inner) {
+    border-radius: 4px;
+  }
+
+  .page-card {
+    border-radius: 1px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+
+    :deep(.el-card__header) {
+      padding: 15px 20px;
+      border-bottom: 1px solid #ebeef5;
+      background-color: #fff;
+      border-radius: 8px 8px 0 0;
+    }
+
+    :deep(.el-card__body) {
+      padding: 20px;
+      background-color: #fff;
+    }
+  }
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+      .page-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #303133;
+      }
+    }
+
+    .search-right {
+      display: flex;
+      gap: 10px;
+    }
+  }
+
+  .search-bar {
+    margin-bottom: 10px;
+    background-color: #f8faff;
+    padding: 6px 10px;
+    border-radius: 6px;
+    border: 0px solid #e6ebf5;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    :deep(.el-form) {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+
+      .el-form-item {
+        margin-bottom: 0;
+        margin-right: 15px;
+
+        .el-form-item__label {
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  .pagination {
+    margin-top: 8px;
+    margin-bottom: 8px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  :deep(.el-table) {
+    border-radius: 4px;
+    overflow: auto;
+    height: calc(100vh - 195px);
+
+    th.el-table__cell {
+      background-color: #f5f7fa !important;
+      color: #606266;
+      font-weight: 600;
+    }
+
+    .el-button--primary.is-link {
+      color: #409eff;
+    }
+
+    .el-button--danger.is-link {
+      color: #f56c6c;
+    }
+  }
+}
+</style>

gw-ui/src/views/slaj/woas/BisWoasNoti.vue

@@ -1,52 +1,82 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px">
-      <el-form-item label="收文单位名称" prop="orgName">
-        <el-input v-model="queryParams.orgName" placeholder="请输入收文单位名称" clearable style="width: 200px" @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-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['woas:noti:add']">新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['woas:noti:edit']">修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['woas:noti:remove']">删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['woas:noti:export']">导出</el-button>
-      </el-col>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns" storageKey="woas-woas-noti-index"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="收文单位名称" align="center" prop="orgName" v-if="columns.orgName.visible" :show-overflow-tooltip="true" />
-      <el-table-column label="自评分数" align="center" prop="seasScore" v-if="columns.seasScore.visible" :show-overflow-tooltip="true" />
-      <el-table-column label="自评时间" align="center" prop="seasTime" v-if="columns.seasTime.visible" :show-overflow-tooltip="true" />
-      <el-table-column label="上报状态" align="center" prop="repStat" v-if="columns.repStat.visible" :show-overflow-tooltip="true" />
-      <el-table-column label="操作" align="center" class-name="BisWoasNoti" width="200">
-        <template #default="scope">
-          <el-tooltip content="修改" placement="top">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['woas:noti:edit']"></el-button>
-          </el-tooltip>
-          <el-tooltip content="删除" placement="top">
-            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['woas:noti:remove']"></el-button>
-          </el-tooltip>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
-
-    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
+  <div class="system-page config-page">
+    <el-card class="page-card">
+      <template #header>
+        <div class="card-header">
+          <div class="header-left">
+            <el-icon :size="20" color="#409EFF"><Notification /></el-icon>
+            <span class="page-title">考核通知收文单位</span>
+          </div>
+          <div class="search-right">
+            <el-button type="primary" v-hasPermi="['woas:noti:add']" @click="handleAdd">
+              <el-icon><Plus /></el-icon> 新增
+            </el-button>
+            <el-button type="success" v-hasPermi="['woas:noti:edit']" :disabled="single" @click="handleUpdate()">
+              <el-icon><Edit /></el-icon> 修改
+            </el-button>
+            <el-button type="danger" v-hasPermi="['woas:noti:remove']" :disabled="multiple" @click="handleDelete()">
+              <el-icon><Delete /></el-icon> 删除
+            </el-button>
+            <el-button type="warning" v-hasPermi="['woas:noti:export']" @click="handleExport">
+              <el-icon><Download /></el-icon> 导出
+            </el-button>
+          </div>
+        </div>
+      </template>
+
+      <!-- 搜索栏 -->
+      <div class="search-bar" v-show="showSearch">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+          <el-form-item label="收文单位名称" prop="orgName">
+            <el-input v-model="queryParams.orgName" placeholder="请输入收文单位名称" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handleQuery">
+              <el-icon><Search /></el-icon> 搜索
+            </el-button>
+            <el-button @click="resetQuery">
+              <el-icon><RefreshRight /></el-icon> 重置
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 数据列表 -->
+      <el-table v-loading="loading" :data="dataList" style="width: 100%" border @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="45" />
+        <el-table-column label="收文单位名称" align="center" prop="orgName" :show-overflow-tooltip="true" />
+        <el-table-column label="自评分数" align="center" prop="seasScore" />
+        <el-table-column label="自评时间" align="center" prop="seasTime" width="180">
+          <template #default="{ row }">
+            {{ proxy.parseTime(row.seasTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="上报状态" align="center" prop="repStat" :show-overflow-tooltip="true" />
+        <el-table-column label="操作" align="center" width="150" fixed="right">
+          <template #default="{ row }">
+            <el-button link type="primary" v-hasPermi="['woas:noti:edit']" @click="handleUpdate(row)"> 编辑 </el-button>
+            <el-button link type="danger" v-hasPermi="['woas:noti:remove']" @click="handleDelete(row)"> 删除 </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination">
+        <el-pagination
+          v-show="total > 0"
+          v-model:current-page="queryParams.pageNum"
+          v-model:page-size="queryParams.pageSize"
+          :total="total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="getList"
+          @current-change="getList"
+        />
+      </div>
+    </el-card>
+
+    <!-- 新增/编辑对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="600px" top="5vh" append-to-body @close="cancel">
       <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
         <el-form-item label="收文单位GUID" prop="orgGuid">
           <el-input v-model="form.orgGuid" placeholder="请输入收文单位GUID" />
@@ -71,130 +101,250 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
+        <el-button @click="dialog.visible = false">取消</el-button>
+        <el-button type="primary" @click="submitForm">确定</el-button>
       </template>
     </el-dialog>
   </div>
 </template>
 
-<script setup name="WoasNoti">
-import { listWoasNoti, getWoasNoti, addWoasNoti, updateWoasNoti, delWoasNoti } from "@/api/slaj/woas";
-import { getCurrentInstance, reactive, ref, toRefs } from "vue";
-
-const { proxy } = getCurrentInstance();
-
-const dataList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const title = ref("");
-
-const columns = ref({
-    orgName: { visible: true },
-    seasScore: { visible: true },
-    seasTime: { visible: true },
-    repStat: { visible: true }
-});
-
-const data = reactive({
-  form: {},
-  queryParams: { pageNum: 1, pageSize: 10, orgName: null },
+<script setup name="BisWoasNoti" lang="ts">
+import { listWoasNoti, getWoasNoti, addWoasNoti, updateWoasNoti, delWoasNoti } from '@/api/slaj/woas'
+import { Plus, Edit, Delete, Download, Search, RefreshRight, Notification } from '@element-plus/icons-vue'
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance
+
+const dataList = ref<any[]>([])
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref<Array<string | number>>([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+
+const queryFormRef = ref<ElFormInstance>()
+const formRef = ref<ElFormInstance>()
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+})
+
+const initFormData: any = {
+  guid: null,
+  orgGuid: null,
+  woasGuid: null,
+  orgName: null,
+  seasScore: null,
+  seasTime: null,
+  repStat: null,
+  note: null
+}
+
+const data = reactive<PageData<any, any>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    orgName: null
+  },
   rules: {}
-});
+})
 
-const { form, queryParams, rules } = toRefs(data);
+const { queryParams, form, rules } = toRefs(data)
 
-function getList() {
-  loading.value = true;
-  listWoasNoti(queryParams.value).then(response => {
-    dataList.value = response.rows;
-    total.value = response.total;
-    loading.value = false;
-  });
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  const res = await listWoasNoti(queryParams.value)
+  dataList.value = res.rows
+  total.value = res.total
+  loading.value = false
 }
 
-function handleQuery() {
-  queryParams.value.pageNum = 1;
-  getList();
+/** 取消按钮 */
+const cancel = () => {
+  reset()
+  dialog.visible = false
 }
 
-function resetQuery() {
-  proxy.resetForm("queryRef");
-  handleQuery();
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData }
+  formRef.value?.resetFields()
 }
 
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.guid);
-  single.value = selection.length !== 1;
-  multiple.value = !selection.length;
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1
+  getList()
 }
 
-function handleAdd() {
-  reset();
-  open.value = true;
-  title.value = "添加考核通知收文单位";
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields()
+  handleQuery()
 }
 
-function handleUpdate(row) {
-  reset();
-  const guid = row.guid || ids.value[0];
-  getWoasNoti(guid).then(response => {
-    form.value = response.data;
-    open.value = true;
-    title.value = "修改考核通知收文单位";
-  });
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: any[]) => {
+  ids.value = selection.map((item) => item.guid)
+  single.value = selection.length !== 1
+  multiple.value = !selection.length
 }
 
-function submitForm() {
-  proxy.$refs["formRef"].validate(valid => {
-    if (valid) {
-      if (form.value.guid != null) {
-        updateWoasNoti(form.value).then(() => {
-          proxy.$modal.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
-      } else {
-        addWoasNoti(form.value).then(() => {
-          proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
-      }
-    }
-  });
+/** 新增按钮操作 */
+const handleAdd = () => {
+  reset()
+  dialog.visible = true
+  dialog.title = '添加考核通知收文单位'
 }
 
-function handleDelete(row) {
-  const guids = row.guid || ids.value.join(",");
-  proxy.$modal.confirm('是否确认删除所选数据？').then(function() {
-    return delWoasNoti(guids);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  });
+/** 修改按钮操作 */
+const handleUpdate = async (row?: any) => {
+  reset()
+  const guid = row?.guid || ids.value[0]
+  const res = await getWoasNoti(guid)
+  Object.assign(form.value, res.data)
+  dialog.visible = true
+  dialog.title = '修改考核通知收文单位'
 }
 
-function handleExport() {
-  proxy.download('/woas/noti/export', { ...queryParams.value }, `考核通知收文单位_${new Date().getTime()}.xlsx`);
+/** 提交按钮 */
+const submitForm = () => {
+  formRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      form.value.guid ? await updateWoasNoti(form.value) : await addWoasNoti(form.value)
+      proxy?.$modal.msgSuccess('操作成功')
+      dialog.visible = false
+      await getList()
+    }
+  })
 }
 
-function cancel() {
-  open.value = false;
-  reset();
+/** 删除按钮操作 */
+const handleDelete = async (row?: any) => {
+  const guids = row?.guid || ids.value
+  await proxy?.$modal.confirm('是否确认删除所选数据？')
+  await delWoasNoti(guids)
+  await getList()
+  proxy?.$modal.msgSuccess('删除成功')
 }
 
-function reset() {
-  form.value = { guid: null, orgGuid: null, woasGuid: null, orgName: null, seasScore: null, seasTime: null, repStat: null, note: null };
-  proxy.resetForm("formRef");
+/** 导出按钮操作 */
+const handleExport = () => {
+  proxy?.download('/woas/noti/export', { ...queryParams.value }, `考核通知收文单位_${new Date().getTime()}.xlsx`)
 }
 
-getList();
+onMounted(() => {
+  getList()
+})
 </script>
+
+<style scoped lang="scss">
+.system-page {
+  padding: 0px;
+  background-color: #f5f7fa;
+  min-height: calc(100vh - 10px);
+
+  :deep(.el-input__wrapper) {
+    border-radius: 4px;
+  }
+
+  :deep(.el-textarea__inner) {
+    border-radius: 4px;
+  }
+
+  .page-card {
+    border-radius: 1px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+
+    :deep(.el-card__header) {
+      padding: 8px 20px !important;
+      border-bottom: 1px solid #ebeef5;
+      background-color: #fff;
+      border-radius: 8px 8px 0 0;
+    }
+
+    :deep(.el-card__body) {
+      padding: 0px !important;
+      background-color: #fff;
+    }
+  }
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+      .page-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #303133;
+      }
+    }
+
+    .search-right {
+      display: flex;
+      gap: 10px;
+    }
+  }
+
+  .search-bar {
+    margin-bottom: 0px;
+    background-color: #f8faff;
+    padding: 6px 10px;
+    border-radius: 6px;
+    border: 0px solid #e6ebf5;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    :deep(.el-form) {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+
+      .el-form-item {
+        margin-bottom: 0;
+        margin-right: 15px;
+
+        .el-form-item__label {
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  .pagination {
+    margin-top: 8px;
+    margin-bottom: 8px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  :deep(.el-table) {
+    border-radius: 4px;
+    overflow: auto;
+    height: calc(100vh - 195px);
+
+    th.el-table__cell {
+      background-color: #f5f7fa !important;
+      color: #606266;
+      font-weight: 600;
+    }
+
+    .el-button--primary.is-link {
+      color: #409eff;
+    }
+
+    .el-button--danger.is-link {
+      color: #f56c6c;
+    }
+  }
+}
+</style>

gw-ui/src/views/slaj/woas/BisWoasObj.vue

@@ -46,6 +46,27 @@
         <el-table-column type="selection" width="45" />
         <el-table-column label="被考核单位名称" align="center" prop="woasWiunName" :show-overflow-tooltip="true" />
         <el-table-column label="被考核单位类型" align="center" prop="asseOrgType" :show-overflow-tooltip="true" />
+        <el-table-column label="考核类型" align="center" prop="woasType" width="120">
+          <template #default="{ row }">
+            <el-tag v-if="row.woasType === '1'" type="primary">水利稽察考核</el-tag>
+            <el-tag v-else-if="row.woasType === '2'" type="success">安全生产考核</el-tag>
+            <span v-else>{{ row.woasType }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="下发状态" align="center" prop="sendStat" width="100">
+          <template #default="{ row }">
+            <el-tag v-if="row.sendStat === '1'" type="success">已发送</el-tag>
+            <el-tag v-else-if="row.sendStat === '2'" type="info">未发送</el-tag>
+            <span v-else>{{ row.sendStat }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="是否为转发" align="center" prop="isForw" width="100">
+          <template #default="{ row }">
+            <el-tag v-if="row.isForw === '1'" type="warning">是</el-tag>
+            <el-tag v-else-if="row.isForw === '0'" type="">否</el-tag>
+            <span v-else>{{ row.isForw }}</span>
+          </template>
+        </el-table-column>
         <el-table-column label="现场考核状态" align="center" prop="asseStat" :show-overflow-tooltip="true" />
         <el-table-column label="现场考核开始时间" align="center" prop="woasStartime" width="180">
           <template #default="{ row }">
@@ -104,14 +125,20 @@
         <el-form-item label="考核组GUID" prop="woasGroupGuid">
           <el-input v-model="form.woasGroupGuid" placeholder="请输入考核组GUID" />
         </el-form-item>
+        <el-form-item label="考核类型" prop="woasType">
+          <el-select v-model="form.woasType" placeholder="请选择考核类型" clearable style="width: 100%">
+            <el-option label="水利稽察考核" value="1" />
+            <el-option label="安全生产考核" value="2" />
+          </el-select>
+        </el-form-item>
         <el-form-item label="现场考核状态" prop="asseStat">
           <el-input v-model="form.asseStat" placeholder="请输入现场考核状态" />
         </el-form-item>
         <el-form-item label="现场考核开始时间" prop="woasStartime">
-          <el-input v-model="form.woasStartime" placeholder="请输入现场考核开始时间" />
+          <el-date-picker v-model="form.woasStartime" type="datetime" placeholder="请选择现场考核开始时间" value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
         </el-form-item>
         <el-form-item label="现场考核结束时间" prop="woasDeadline">
-          <el-input v-model="form.woasDeadline" placeholder="请输入现场考核结束时间" />
+          <el-date-picker v-model="form.woasDeadline" type="datetime" placeholder="请选择现场考核结束时间" value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
         </el-form-item>
         <el-form-item label="综合评价状态" prop="evalStat">
           <el-input v-model="form.evalStat" placeholder="请输入综合评价状态" />
@@ -131,8 +158,20 @@
         <el-form-item label="最终得分" prop="finalScor">
           <el-input v-model="form.finalScor" placeholder="请输入最终得分" />
         </el-form-item>
+        <el-form-item label="下发状态" prop="sendStat">
+          <el-select v-model="form.sendStat" placeholder="请选择下发状态" clearable style="width: 100%">
+            <el-option label="已发送" value="1" />
+            <el-option label="未发送" value="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="是否为转发" prop="isForw">
+          <el-select v-model="form.isForw" placeholder="请选择是否为转发" clearable style="width: 100%">
+            <el-option label="否" value="0" />
+            <el-option label="是" value="1" />
+          </el-select>
+        </el-form-item>
         <el-form-item label="备注" prop="note">
-          <el-input v-model="form.note" placeholder="请输入备注" />
+          <el-input v-model="form.note" type="textarea" placeholder="请输入备注" />
         </el-form-item>
       </el-form>
       <template #footer>
@@ -171,6 +210,7 @@ const initFormData: any = {
   asseOrgType: null,
   woasGuid: null,
   woasGroupGuid: null,
+  woasType: null,
   asseStat: null,
   woasStartime: null,
   woasDeadline: null,
@@ -180,6 +220,8 @@ const initFormData: any = {
   compEvalScor: null,
   otheAddterm: null,
   finalScor: null,
+  sendStat: null,
+  isForw: null,
   note: null
 }
 
@@ -302,18 +344,18 @@ onMounted(() => {
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
 
     :deep(.el-card__header) {
-      padding: 8px 20px !important;
+      padding: 15px 20px;
       border-bottom: 1px solid #ebeef5;
       background-color: #fff;
       border-radius: 8px 8px 0 0;
     }
 
     :deep(.el-card__body) {
-      padding: 0px !important;
+      padding: 20px;
       background-color: #fff;
     }
   }
- 
+
   .card-header {
     display: flex;
     justify-content: space-between;
@@ -338,7 +380,7 @@ onMounted(() => {
   }
 
   .search-bar {
-    margin-bottom: 1px;
+    margin-bottom: 10px;
     background-color: #f8faff;
     padding: 6px 10px;
     border-radius: 6px;

gw-ui/src/views/slaj/woas/BisWoasProg.vue

@@ -1,52 +1,86 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px">
-      <el-form-item label="考核方案名称" prop="progName">
-        <el-input v-model="queryParams.progName" placeholder="请输入考核方案名称" clearable style="width: 200px" @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-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['woas:prog:add']">新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['woas:prog:edit']">修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['woas:prog:remove']">删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['woas:prog:export']">导出</el-button>
-      </el-col>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns" storageKey="woas-woas-prog-index"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="考核方案名称" align="center" prop="progName" v-if="columns.progName.visible" :show-overflow-tooltip="true" />
-      <el-table-column label="开始时间" align="center" prop="startTime" v-if="columns.startTime.visible" :show-overflow-tooltip="true" />
-      <el-table-column label="结束时间" align="center" prop="endTime" v-if="columns.endTime.visible" :show-overflow-tooltip="true" />
-      <el-table-column label="完成状态" align="center" prop="compStat" v-if="columns.compStat.visible" :show-overflow-tooltip="true" />
-      <el-table-column label="操作" align="center" class-name="BisWoasProg" width="200">
-        <template #default="scope">
-          <el-tooltip content="修改" placement="top">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['woas:prog:edit']"></el-button>
-          </el-tooltip>
-          <el-tooltip content="删除" placement="top">
-            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['woas:prog:remove']"></el-button>
-          </el-tooltip>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
-
-    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
+  <div class="system-page config-page">
+    <el-card class="page-card">
+      <template #header>
+        <div class="card-header">
+          <div class="header-left">
+            <el-icon :size="20" color="#409EFF"><Document /></el-icon>
+            <span class="page-title">考核方案</span>
+          </div>
+          <div class="search-right">
+            <el-button type="primary" v-hasPermi="['woas:prog:add']" @click="handleAdd">
+              <el-icon><Plus /></el-icon> 新增
+            </el-button>
+            <el-button type="success" v-hasPermi="['woas:prog:edit']" :disabled="single" @click="handleUpdate()">
+              <el-icon><Edit /></el-icon> 修改
+            </el-button>
+            <el-button type="danger" v-hasPermi="['woas:prog:remove']" :disabled="multiple" @click="handleDelete()">
+              <el-icon><Delete /></el-icon> 删除
+            </el-button>
+            <el-button type="warning" v-hasPermi="['woas:prog:export']" @click="handleExport">
+              <el-icon><Download /></el-icon> 导出
+            </el-button>
+          </div>
+        </div>
+      </template>
+
+      <!-- 搜索栏 -->
+      <div class="search-bar" v-show="showSearch">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+          <el-form-item label="考核方案名称" prop="progName">
+            <el-input v-model="queryParams.progName" placeholder="请输入考核方案名称" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handleQuery">
+              <el-icon><Search /></el-icon> 搜索
+            </el-button>
+            <el-button @click="resetQuery">
+              <el-icon><RefreshRight /></el-icon> 重置
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 数据列表 -->
+      <el-table v-loading="loading" :data="dataList" style="width: 100%" border @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="45" />
+        <el-table-column label="考核方案名称" align="center" prop="progName" :show-overflow-tooltip="true" />
+        <el-table-column label="开始时间" align="center" prop="startTime" width="180">
+          <template #default="{ row }">
+            {{ proxy.parseTime(row.startTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="结束时间" align="center" prop="endTime" width="180">
+          <template #default="{ row }">
+            {{ proxy.parseTime(row.endTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="完成状态" align="center" prop="compStat" :show-overflow-tooltip="true" />
+        <el-table-column label="操作" align="center" width="150" fixed="right">
+          <template #default="{ row }">
+            <el-button link type="primary" v-hasPermi="['woas:prog:edit']" @click="handleUpdate(row)"> 编辑 </el-button>
+            <el-button link type="danger" v-hasPermi="['woas:prog:remove']" @click="handleDelete(row)"> 删除 </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination">
+        <el-pagination
+          v-show="total > 0"
+          v-model:current-page="queryParams.pageNum"
+          v-model:page-size="queryParams.pageSize"
+          :total="total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="getList"
+          @current-change="getList"
+        />
+      </div>
+    </el-card>
+
+    <!-- 新增/编辑对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="600px" top="5vh" append-to-body @close="cancel">
       <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
         <el-form-item label="工作考核GUID" prop="woasGuid">
           <el-input v-model="form.woasGuid" placeholder="请输入工作考核GUID" />
@@ -68,130 +102,249 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
+        <el-button @click="dialog.visible = false">取消</el-button>
+        <el-button type="primary" @click="submitForm">确定</el-button>
       </template>
     </el-dialog>
   </div>
 </template>
 
-<script setup name="WoasProg">
-import { listWoasProg, getWoasProg, addWoasProg, updateWoasProg, delWoasProg } from "@/api/slaj/woas";
-import { getCurrentInstance, reactive, ref, toRefs } from "vue";
-
-const { proxy } = getCurrentInstance();
-
-const dataList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const title = ref("");
-
-const columns = ref({
-    progName: { visible: true },
-    startTime: { visible: true },
-    endTime: { visible: true },
-    compStat: { visible: true }
-});
-
-const data = reactive({
-  form: {},
-  queryParams: { pageNum: 1, pageSize: 10, progName: null },
+<script setup name="BisWoasProg" lang="ts">
+import { listWoasProg, getWoasProg, addWoasProg, updateWoasProg, delWoasProg } from '@/api/slaj/woas'
+import { Plus, Edit, Delete, Download, Search, RefreshRight, Document } from '@element-plus/icons-vue'
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance
+
+const dataList = ref<any[]>([])
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref<Array<string | number>>([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+
+const queryFormRef = ref<ElFormInstance>()
+const formRef = ref<ElFormInstance>()
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+})
+
+const initFormData: any = {
+  guid: null,
+  woasGuid: null,
+  progName: null,
+  startTime: null,
+  endTime: null,
+  compStat: null,
+  note: null
+}
+
+const data = reactive<PageData<any, any>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    progName: null
+  },
   rules: {}
-});
+})
 
-const { form, queryParams, rules } = toRefs(data);
+const { queryParams, form, rules } = toRefs(data)
 
-function getList() {
-  loading.value = true;
-  listWoasProg(queryParams.value).then(response => {
-    dataList.value = response.rows;
-    total.value = response.total;
-    loading.value = false;
-  });
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  const res = await listWoasProg(queryParams.value)
+  dataList.value = res.rows
+  total.value = res.total
+  loading.value = false
 }
 
-function handleQuery() {
-  queryParams.value.pageNum = 1;
-  getList();
+/** 取消按钮 */
+const cancel = () => {
+  reset()
+  dialog.visible = false
 }
 
-function resetQuery() {
-  proxy.resetForm("queryRef");
-  handleQuery();
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData }
+  formRef.value?.resetFields()
 }
 
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.guid);
-  single.value = selection.length !== 1;
-  multiple.value = !selection.length;
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1
+  getList()
 }
 
-function handleAdd() {
-  reset();
-  open.value = true;
-  title.value = "添加考核方案";
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields()
+  handleQuery()
 }
 
-function handleUpdate(row) {
-  reset();
-  const guid = row.guid || ids.value[0];
-  getWoasProg(guid).then(response => {
-    form.value = response.data;
-    open.value = true;
-    title.value = "修改考核方案";
-  });
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: any[]) => {
+  ids.value = selection.map((item) => item.guid)
+  single.value = selection.length !== 1
+  multiple.value = !selection.length
 }
 
-function submitForm() {
-  proxy.$refs["formRef"].validate(valid => {
-    if (valid) {
-      if (form.value.guid != null) {
-        updateWoasProg(form.value).then(() => {
-          proxy.$modal.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
-      } else {
-        addWoasProg(form.value).then(() => {
-          proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
-      }
-    }
-  });
+/** 新增按钮操作 */
+const handleAdd = () => {
+  reset()
+  dialog.visible = true
+  dialog.title = '添加考核方案'
 }
 
-function handleDelete(row) {
-  const guids = row.guid || ids.value.join(",");
-  proxy.$modal.confirm('是否确认删除所选数据？').then(function() {
-    return delWoasProg(guids);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  });
+/** 修改按钮操作 */
+const handleUpdate = async (row?: any) => {
+  reset()
+  const guid = row?.guid || ids.value[0]
+  const res = await getWoasProg(guid)
+  Object.assign(form.value, res.data)
+  dialog.visible = true
+  dialog.title = '修改考核方案'
 }
 
-function handleExport() {
-  proxy.download('/woas/prog/export', { ...queryParams.value }, `考核方案_${new Date().getTime()}.xlsx`);
+/** 提交按钮 */
+const submitForm = () => {
+  formRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      form.value.guid ? await updateWoasProg(form.value) : await addWoasProg(form.value)
+      proxy?.$modal.msgSuccess('操作成功')
+      dialog.visible = false
+      await getList()
+    }
+  })
 }
 
-function cancel() {
-  open.value = false;
-  reset();
+/** 删除按钮操作 */
+const handleDelete = async (row?: any) => {
+  const guids = row?.guid || ids.value
+  await proxy?.$modal.confirm('是否确认删除所选数据？')
+  await delWoasProg(guids)
+  await getList()
+  proxy?.$modal.msgSuccess('删除成功')
 }
 
-function reset() {
-  form.value = { guid: null, woasGuid: null, progName: null, startTime: null, endTime: null, compStat: null, note: null };
-  proxy.resetForm("formRef");
+/** 导出按钮操作 */
+const handleExport = () => {
+  proxy?.download('/woas/prog/export', { ...queryParams.value }, `考核方案_${new Date().getTime()}.xlsx`)
 }
 
-getList();
+onMounted(() => {
+  getList()
+})
 </script>
+
+<style scoped lang="scss">
+.system-page {
+  padding: 0px;
+  background-color: #f5f7fa;
+  min-height: calc(100vh - 10px);
+
+  :deep(.el-input__wrapper) {
+    border-radius: 4px;
+  }
+
+  :deep(.el-textarea__inner) {
+    border-radius: 4px;
+  }
+
+  .page-card {
+    border-radius: 1px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+
+    :deep(.el-card__header) {
+      padding: 8px 20px !important;
+      border-bottom: 1px solid #ebeef5;
+      background-color: #fff;
+      border-radius: 8px 8px 0 0;
+    }
+
+    :deep(.el-card__body) {
+      padding: 0px !important;
+      background-color: #fff;
+    }
+  }
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+      .page-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #303133;
+      }
+    }
+
+    .search-right {
+      display: flex;
+      gap: 10px;
+    }
+  }
+
+  .search-bar {
+    margin-bottom: 0px;
+    background-color: #f8faff;
+    padding: 6px 10px;
+    border-radius: 6px;
+    border: 0px solid #e6ebf5;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    :deep(.el-form) {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+
+      .el-form-item {
+        margin-bottom: 0;
+        margin-right: 15px;
+
+        .el-form-item__label {
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  .pagination {
+    margin-top: 8px;
+    margin-bottom: 8px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  :deep(.el-table) {
+    border-radius: 4px;
+    overflow: auto;
+    height: calc(100vh - 195px);
+
+    th.el-table__cell {
+      background-color: #f5f7fa !important;
+      color: #606266;
+      font-weight: 600;
+    }
+
+    .el-button--primary.is-link {
+      color: #409eff;
+    }
+
+    .el-button--danger.is-link {
+      color: #f56c6c;
+    }
+  }
+}
+</style>

gw-ui/src/views/slaj/woas/BisWoasProj.vue

@@ -1,50 +1,76 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px">
-      <el-form-item label="项目工程名称" prop="projEngName">
-        <el-input v-model="queryParams.projEngName" placeholder="请输入项目工程名称" clearable style="width: 200px" @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-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['woas:proj:add']">新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['woas:proj:edit']">修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['woas:proj:remove']">删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['woas:proj:export']">导出</el-button>
-      </el-col>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns" storageKey="woas-woas-proj-index"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="项目工程名称" align="center" prop="projEngName" v-if="columns.projEngName.visible" :show-overflow-tooltip="true" />
-      <el-table-column label="项目工程性质" align="center" prop="projEngType" v-if="columns.projEngType.visible" :show-overflow-tooltip="true" />
-      <el-table-column label="操作" align="center" class-name="BisWoasProj" width="200">
-        <template #default="scope">
-          <el-tooltip content="修改" placement="top">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['woas:proj:edit']"></el-button>
-          </el-tooltip>
-          <el-tooltip content="删除" placement="top">
-            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['woas:proj:remove']"></el-button>
-          </el-tooltip>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
-
-    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
+  <div class="system-page config-page">
+    <el-card class="page-card">
+      <template #header>
+        <div class="card-header">
+          <div class="header-left">
+            <el-icon :size="20" color="#409EFF"><Briefcase /></el-icon>
+            <span class="page-title">考核项目</span>
+          </div>
+          <div class="search-right">
+            <el-button type="primary" v-hasPermi="['woas:proj:add']" @click="handleAdd">
+              <el-icon><Plus /></el-icon> 新增
+            </el-button>
+            <el-button type="success" v-hasPermi="['woas:proj:edit']" :disabled="single" @click="handleUpdate()">
+              <el-icon><Edit /></el-icon> 修改
+            </el-button>
+            <el-button type="danger" v-hasPermi="['woas:proj:remove']" :disabled="multiple" @click="handleDelete()">
+              <el-icon><Delete /></el-icon> 删除
+            </el-button>
+            <el-button type="warning" v-hasPermi="['woas:proj:export']" @click="handleExport">
+              <el-icon><Download /></el-icon> 导出
+            </el-button>
+          </div>
+        </div>
+      </template>
+
+      <!-- 搜索栏 -->
+      <div class="search-bar" v-show="showSearch">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+          <el-form-item label="项目工程名称" prop="projEngName">
+            <el-input v-model="queryParams.projEngName" placeholder="请输入项目工程名称" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handleQuery">
+              <el-icon><Search /></el-icon> 搜索
+            </el-button>
+            <el-button @click="resetQuery">
+              <el-icon><RefreshRight /></el-icon> 重置
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 数据列表 -->
+      <el-table v-loading="loading" :data="dataList" style="width: 100%" border @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="45" />
+        <el-table-column label="项目工程名称" align="center" prop="projEngName" :show-overflow-tooltip="true" />
+        <el-table-column label="项目工程性质" align="center" prop="projEngType" :show-overflow-tooltip="true" />
+        <el-table-column label="操作" align="center" width="150" fixed="right">
+          <template #default="{ row }">
+            <el-button link type="primary" v-hasPermi="['woas:proj:edit']" @click="handleUpdate(row)"> 编辑 </el-button>
+            <el-button link type="danger" v-hasPermi="['woas:proj:remove']" @click="handleDelete(row)"> 删除 </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination">
+        <el-pagination
+          v-show="total > 0"
+          v-model:current-page="queryParams.pageNum"
+          v-model:page-size="queryParams.pageSize"
+          :total="total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="getList"
+          @current-change="getList"
+        />
+      </div>
+    </el-card>
+
+    <!-- 新增/编辑对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="600px" top="5vh" append-to-body @close="cancel">
       <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
         <el-form-item label="项目GUID" prop="projGuid">
           <el-input v-model="form.projGuid" placeholder="请输入项目GUID" />
@@ -69,128 +95,250 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
+        <el-button @click="dialog.visible = false">取消</el-button>
+        <el-button type="primary" @click="submitForm">确定</el-button>
       </template>
     </el-dialog>
   </div>
 </template>
 
-<script setup name="WoasProj">
-import { listWoasProj, getWoasProj, addWoasProj, updateWoasProj, delWoasProj } from "@/api/slaj/woas";
-import { getCurrentInstance, reactive, ref, toRefs } from "vue";
-
-const { proxy } = getCurrentInstance();
-
-const dataList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const title = ref("");
-
-const columns = ref({
-    projEngName: { visible: true },
-    projEngType: { visible: true }
-});
-
-const data = reactive({
-  form: {},
-  queryParams: { pageNum: 1, pageSize: 10, projEngName: null },
+<script setup name="BisWoasProj" lang="ts">
+import { listWoasProj, getWoasProj, addWoasProj, updateWoasProj, delWoasProj } from '@/api/slaj/woas'
+import { Plus, Edit, Delete, Download, Search, RefreshRight, Briefcase } from '@element-plus/icons-vue'
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance
+
+const dataList = ref<any[]>([])
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref<Array<string | number>>([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+
+const queryFormRef = ref<ElFormInstance>()
+const formRef = ref<ElFormInstance>()
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+})
+
+const initFormData: any = {
+  guid: null,
+  projGuid: null,
+  woasGroupGuid: null,
+  woasGuid: null,
+  woasObjGuid: null,
+  projEngName: null,
+  projEngType: null,
+  note: null
+}
+
+const data = reactive<PageData<any, any>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    projEngName: null
+  },
   rules: {}
-});
+})
 
-const { form, queryParams, rules } = toRefs(data);
+const { queryParams, form, rules } = toRefs(data)
 
-function getList() {
-  loading.value = true;
-  listWoasProj(queryParams.value).then(response => {
-    dataList.value = response.rows;
-    total.value = response.total;
-    loading.value = false;
-  });
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  const res = await listWoasProj(queryParams.value)
+  dataList.value = res.rows
+  total.value = res.total
+  loading.value = false
 }
 
-function handleQuery() {
-  queryParams.value.pageNum = 1;
-  getList();
+/** 取消按钮 */
+const cancel = () => {
+  reset()
+  dialog.visible = false
 }
 
-function resetQuery() {
-  proxy.resetForm("queryRef");
-  handleQuery();
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData }
+  formRef.value?.resetFields()
 }
 
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.guid);
-  single.value = selection.length !== 1;
-  multiple.value = !selection.length;
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1
+  getList()
 }
 
-function handleAdd() {
-  reset();
-  open.value = true;
-  title.value = "添加考核项目";
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields()
+  handleQuery()
 }
 
-function handleUpdate(row) {
-  reset();
-  const guid = row.guid || ids.value[0];
-  getWoasProj(guid).then(response => {
-    form.value = response.data;
-    open.value = true;
-    title.value = "修改考核项目";
-  });
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: any[]) => {
+  ids.value = selection.map((item) => item.guid)
+  single.value = selection.length !== 1
+  multiple.value = !selection.length
 }
 
-function submitForm() {
-  proxy.$refs["formRef"].validate(valid => {
-    if (valid) {
-      if (form.value.guid != null) {
-        updateWoasProj(form.value).then(() => {
-          proxy.$modal.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
-      } else {
-        addWoasProj(form.value).then(() => {
-          proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
-      }
-    }
-  });
+/** 新增按钮操作 */
+const handleAdd = () => {
+  reset()
+  dialog.visible = true
+  dialog.title = '添加考核项目'
 }
 
-function handleDelete(row) {
-  const guids = row.guid || ids.value.join(",");
-  proxy.$modal.confirm('是否确认删除所选数据？').then(function() {
-    return delWoasProj(guids);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  });
+/** 修改按钮操作 */
+const handleUpdate = async (row?: any) => {
+  reset()
+  const guid = row?.guid || ids.value[0]
+  const res = await getWoasProj(guid)
+  Object.assign(form.value, res.data)
+  dialog.visible = true
+  dialog.title = '修改考核项目'
 }
 
-function handleExport() {
-  proxy.download('/woas/proj/export', { ...queryParams.value }, `考核项目_${new Date().getTime()}.xlsx`);
+/** 提交按钮 */
+const submitForm = () => {
+  formRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      form.value.guid ? await updateWoasProj(form.value) : await addWoasProj(form.value)
+      proxy?.$modal.msgSuccess('操作成功')
+      dialog.visible = false
+      await getList()
+    }
+  })
 }
 
-function cancel() {
-  open.value = false;
-  reset();
+/** 删除按钮操作 */
+const handleDelete = async (row?: any) => {
+  const guids = row?.guid || ids.value
+  await proxy?.$modal.confirm('是否确认删除所选数据？')
+  await delWoasProj(guids)
+  await getList()
+  proxy?.$modal.msgSuccess('删除成功')
 }
 
-function reset() {
-  form.value = { guid: null, projGuid: null, woasGroupGuid: null, woasGuid: null, woasObjGuid: null, projEngName: null, projEngType: null, note: null };
-  proxy.resetForm("formRef");
+/** 导出按钮操作 */
+const handleExport = () => {
+  proxy?.download('/woas/proj/export', { ...queryParams.value }, `考核项目_${new Date().getTime()}.xlsx`)
 }
 
-getList();
+onMounted(() => {
+  getList()
+})
 </script>
+
+<style scoped lang="scss">
+.system-page {
+  padding: 0px;
+  background-color: #f5f7fa;
+  min-height: calc(100vh - 10px);
+
+  :deep(.el-input__wrapper) {
+    border-radius: 4px;
+  }
+
+  :deep(.el-textarea__inner) {
+    border-radius: 4px;
+  }
+
+  .page-card {
+    border-radius: 1px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+
+    :deep(.el-card__header) {
+      padding: 8px 20px !important;
+      border-bottom: 1px solid #ebeef5;
+      background-color: #fff;
+      border-radius: 8px 8px 0 0;
+    }
+
+    :deep(.el-card__body) {
+      padding: 0px !important;
+      background-color: #fff;
+    }
+  }
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+      .page-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #303133;
+      }
+    }
+
+    .search-right {
+      display: flex;
+      gap: 10px;
+    }
+  }
+
+  .search-bar {
+    margin-bottom: 10px;
+    background-color: #f8faff;
+    padding: 6px 10px;
+    border-radius: 6px;
+    border: 0px solid #e6ebf5;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    :deep(.el-form) {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+
+      .el-form-item {
+        margin-bottom: 0;
+        margin-right: 15px;
+
+        .el-form-item__label {
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  .pagination {
+    margin-top: 8px;
+    margin-bottom: 8px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  :deep(.el-table) {
+    border-radius: 4px;
+    overflow: auto;
+    height: calc(100vh - 195px);
+
+    th.el-table__cell {
+      background-color: #f5f7fa !important;
+      color: #606266;
+      font-weight: 600;
+    }
+
+    .el-button--primary.is-link {
+      color: #409eff;
+    }
+
+    .el-button--danger.is-link {
+      color: #f56c6c;
+    }
+  }
+}
+</style>

gw-ui/src/views/slaj/woas/BisWoasScor.vue

@@ -1,52 +1,78 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px">
-      <el-form-item label="被考核对象名称" prop="woasOrgName">
-        <el-input v-model="queryParams.woasOrgName" placeholder="请输入被考核对象名称" clearable style="width: 200px" @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-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['woas:scor:add']">新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['woas:scor:edit']">修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['woas:scor:remove']">删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['woas:scor:export']">导出</el-button>
-      </el-col>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns" storageKey="woas-woas-scor-index"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="被考核对象名称" align="center" prop="woasOrgName" v-if="columns.woasOrgName.visible" :show-overflow-tooltip="true" />
-      <el-table-column label="评分得分" align="center" prop="woasCont" v-if="columns.woasCont.visible" :show-overflow-tooltip="true" />
-      <el-table-column label="额外得分" align="center" prop="addiScor" v-if="columns.addiScor.visible" :show-overflow-tooltip="true" />
-      <el-table-column label="计算得分" align="center" prop="calcScor" v-if="columns.calcScor.visible" :show-overflow-tooltip="true" />
-      <el-table-column label="操作" align="center" class-name="BisWoasScor" width="200">
-        <template #default="scope">
-          <el-tooltip content="修改" placement="top">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['woas:scor:edit']"></el-button>
-          </el-tooltip>
-          <el-tooltip content="删除" placement="top">
-            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['woas:scor:remove']"></el-button>
-          </el-tooltip>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
-
-    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
+  <div class="system-page config-page">
+    <el-card class="page-card">
+      <template #header>
+        <div class="card-header">
+          <div class="header-left">
+            <el-icon :size="20" color="#409EFF"><Trophy /></el-icon>
+            <span class="page-title">考核得分</span>
+          </div>
+          <div class="search-right">
+            <el-button type="primary" v-hasPermi="['woas:scor:add']" @click="handleAdd">
+              <el-icon><Plus /></el-icon> 新增
+            </el-button>
+            <el-button type="success" v-hasPermi="['woas:scor:edit']" :disabled="single" @click="handleUpdate()">
+              <el-icon><Edit /></el-icon> 修改
+            </el-button>
+            <el-button type="danger" v-hasPermi="['woas:scor:remove']" :disabled="multiple" @click="handleDelete()">
+              <el-icon><Delete /></el-icon> 删除
+            </el-button>
+            <el-button type="warning" v-hasPermi="['woas:scor:export']" @click="handleExport">
+              <el-icon><Download /></el-icon> 导出
+            </el-button>
+          </div>
+        </div>
+      </template>
+
+      <!-- 搜索栏 -->
+      <div class="search-bar" v-show="showSearch">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+          <el-form-item label="被考核对象名称" prop="woasOrgName">
+            <el-input v-model="queryParams.woasOrgName" placeholder="请输入被考核对象名称" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handleQuery">
+              <el-icon><Search /></el-icon> 搜索
+            </el-button>
+            <el-button @click="resetQuery">
+              <el-icon><RefreshRight /></el-icon> 重置
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 数据列表 -->
+      <el-table v-loading="loading" :data="dataList" style="width: 100%" border @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="45" />
+        <el-table-column label="被考核对象名称" align="center" prop="woasOrgName" :show-overflow-tooltip="true" />
+        <el-table-column label="评分得分" align="center" prop="woasCont" :show-overflow-tooltip="true" />
+        <el-table-column label="额外得分" align="center" prop="addiScor" :show-overflow-tooltip="true" />
+        <el-table-column label="计算得分" align="center" prop="calcScor" :show-overflow-tooltip="true" />
+        <el-table-column label="操作" align="center" width="150" fixed="right">
+          <template #default="{ row }">
+            <el-button link type="primary" v-hasPermi="['woas:scor:edit']" @click="handleUpdate(row)"> 编辑 </el-button>
+            <el-button link type="danger" v-hasPermi="['woas:scor:remove']" @click="handleDelete(row)"> 删除 </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination">
+        <el-pagination
+          v-show="total > 0"
+          v-model:current-page="queryParams.pageNum"
+          v-model:page-size="queryParams.pageSize"
+          :total="total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="getList"
+          @current-change="getList"
+        />
+      </div>
+    </el-card>
+
+    <!-- 新增/编辑对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="600px" top="5vh" append-to-body @close="cancel">
       <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
         <el-form-item label="工作考核GUID" prop="woasGuid">
           <el-input v-model="form.woasGuid" placeholder="请输入工作考核GUID" />
@@ -71,130 +97,250 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
+        <el-button @click="dialog.visible = false">取消</el-button>
+        <el-button type="primary" @click="submitForm">确定</el-button>
       </template>
     </el-dialog>
   </div>
 </template>
 
-<script setup name="WoasScor">
-import { listWoasScor, getWoasScor, addWoasScor, updateWoasScor, delWoasScor } from "@/api/slaj/woas";
-import { getCurrentInstance, reactive, ref, toRefs } from "vue";
-
-const { proxy } = getCurrentInstance();
-
-const dataList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const title = ref("");
-
-const columns = ref({
-    woasOrgName: { visible: true },
-    woasCont: { visible: true },
-    addiScor: { visible: true },
-    calcScor: { visible: true }
-});
-
-const data = reactive({
-  form: {},
-  queryParams: { pageNum: 1, pageSize: 10, woasOrgName: null },
+<script setup name="BisWoasScor" lang="ts">
+import { listWoasScor, getWoasScor, addWoasScor, updateWoasScor, delWoasScor } from '@/api/slaj/woas'
+import { Plus, Edit, Delete, Download, Search, RefreshRight, Trophy } from '@element-plus/icons-vue'
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance
+
+const dataList = ref<any[]>([])
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref<Array<string | number>>([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+
+const queryFormRef = ref<ElFormInstance>()
+const formRef = ref<ElFormInstance>()
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+})
+
+const initFormData: any = {
+  guid: null,
+  woasGuid: null,
+  bisWoasObjGuid: null,
+  woasCont: null,
+  woasOrgName: null,
+  addiScor: null,
+  calcScor: null,
+  note: null
+}
+
+const data = reactive<PageData<any, any>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    woasOrgName: null
+  },
   rules: {}
-});
+})
 
-const { form, queryParams, rules } = toRefs(data);
+const { queryParams, form, rules } = toRefs(data)
 
-function getList() {
-  loading.value = true;
-  listWoasScor(queryParams.value).then(response => {
-    dataList.value = response.rows;
-    total.value = response.total;
-    loading.value = false;
-  });
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  const res = await listWoasScor(queryParams.value)
+  dataList.value = res.rows
+  total.value = res.total
+  loading.value = false
 }
 
-function handleQuery() {
-  queryParams.value.pageNum = 1;
-  getList();
+/** 取消按钮 */
+const cancel = () => {
+  reset()
+  dialog.visible = false
 }
 
-function resetQuery() {
-  proxy.resetForm("queryRef");
-  handleQuery();
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData }
+  formRef.value?.resetFields()
 }
 
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.guid);
-  single.value = selection.length !== 1;
-  multiple.value = !selection.length;
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1
+  getList()
 }
 
-function handleAdd() {
-  reset();
-  open.value = true;
-  title.value = "添加考核得分";
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields()
+  handleQuery()
 }
 
-function handleUpdate(row) {
-  reset();
-  const guid = row.guid || ids.value[0];
-  getWoasScor(guid).then(response => {
-    form.value = response.data;
-    open.value = true;
-    title.value = "修改考核得分";
-  });
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: any[]) => {
+  ids.value = selection.map((item) => item.guid)
+  single.value = selection.length !== 1
+  multiple.value = !selection.length
 }
 
-function submitForm() {
-  proxy.$refs["formRef"].validate(valid => {
-    if (valid) {
-      if (form.value.guid != null) {
-        updateWoasScor(form.value).then(() => {
-          proxy.$modal.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
-      } else {
-        addWoasScor(form.value).then(() => {
-          proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
-      }
-    }
-  });
+/** 新增按钮操作 */
+const handleAdd = () => {
+  reset()
+  dialog.visible = true
+  dialog.title = '添加考核得分'
 }
 
-function handleDelete(row) {
-  const guids = row.guid || ids.value.join(",");
-  proxy.$modal.confirm('是否确认删除所选数据？').then(function() {
-    return delWoasScor(guids);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  });
+/** 修改按钮操作 */
+const handleUpdate = async (row?: any) => {
+  reset()
+  const guid = row?.guid || ids.value[0]
+  const res = await getWoasScor(guid)
+  Object.assign(form.value, res.data)
+  dialog.visible = true
+  dialog.title = '修改考核得分'
 }
 
-function handleExport() {
-  proxy.download('/woas/scor/export', { ...queryParams.value }, `考核得分_${new Date().getTime()}.xlsx`);
+/** 提交按钮 */
+const submitForm = () => {
+  formRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      form.value.guid ? await updateWoasScor(form.value) : await addWoasScor(form.value)
+      proxy?.$modal.msgSuccess('操作成功')
+      dialog.visible = false
+      await getList()
+    }
+  })
 }
 
-function cancel() {
-  open.value = false;
-  reset();
+/** 删除按钮操作 */
+const handleDelete = async (row?: any) => {
+  const guids = row?.guid || ids.value
+  await proxy?.$modal.confirm('是否确认删除所选数据？')
+  await delWoasScor(guids)
+  await getList()
+  proxy?.$modal.msgSuccess('删除成功')
 }
 
-function reset() {
-  form.value = { guid: null, woasGuid: null, bisWoasObjGuid: null, woasCont: null, woasOrgName: null, addiScor: null, calcScor: null, note: null };
-  proxy.resetForm("formRef");
+/** 导出按钮操作 */
+const handleExport = () => {
+  proxy?.download('/woas/scor/export', { ...queryParams.value }, `考核得分_${new Date().getTime()}.xlsx`)
 }
 
-getList();
+onMounted(() => {
+  getList()
+})
 </script>
+
+<style scoped lang="scss">
+.system-page {
+  padding: 0px;
+  background-color: #f5f7fa;
+  min-height: calc(100vh - 10px);
+
+  :deep(.el-input__wrapper) {
+    border-radius: 4px;
+  }
+
+  :deep(.el-textarea__inner) {
+    border-radius: 4px;
+  }
+
+  .page-card {
+    border-radius: 1px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+
+    :deep(.el-card__header) {
+      padding: 15px 20px;
+      border-bottom: 1px solid #ebeef5;
+      background-color: #fff;
+      border-radius: 8px 8px 0 0;
+    }
+
+    :deep(.el-card__body) {
+      padding: 20px;
+      background-color: #fff;
+    }
+  }
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+      .page-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #303133;
+      }
+    }
+
+    .search-right {
+      display: flex;
+      gap: 10px;
+    }
+  }
+
+  .search-bar {
+    margin-bottom: 10px;
+    background-color: #f8faff;
+    padding: 6px 10px;
+    border-radius: 6px;
+    border: 0px solid #e6ebf5;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    :deep(.el-form) {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+
+      .el-form-item {
+        margin-bottom: 0;
+        margin-right: 15px;
+
+        .el-form-item__label {
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  .pagination {
+    margin-top: 8px;
+    margin-bottom: 8px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  :deep(.el-table) {
+    border-radius: 4px;
+    overflow: auto;
+    height: calc(100vh - 195px);
+
+    th.el-table__cell {
+      background-color: #f5f7fa !important;
+      color: #606266;
+      font-weight: 600;
+    }
+
+    .el-button--primary.is-link {
+      color: #409eff;
+    }
+
+    .el-button--danger.is-link {
+      color: #f56c6c;
+    }
+  }
+}
+</style>

gw-ui/src/views/slaj/woas/BisWoasStaff.vue

@@ -1,49 +1,75 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px">
-      <el-form-item label="成员单位名称" prop="orgName">
-        <el-input v-model="queryParams.orgName" placeholder="请输入成员单位名称" clearable style="width: 200px" @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-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['woas:staff:add']">新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['woas:staff:edit']">修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['woas:staff:remove']">删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['woas:staff:export']">导出</el-button>
-      </el-col>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns" storageKey="woas-woas-staff-index"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="成员单位名称" align="center" prop="orgName" v-if="columns.orgName.visible" :show-overflow-tooltip="true" />
-      <el-table-column label="操作" align="center" class-name="BisWoasStaff" width="200">
-        <template #default="scope">
-          <el-tooltip content="修改" placement="top">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['woas:staff:edit']"></el-button>
-          </el-tooltip>
-          <el-tooltip content="删除" placement="top">
-            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['woas:staff:remove']"></el-button>
-          </el-tooltip>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
-
-    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
+  <div class="system-page config-page">
+    <el-card class="page-card">
+      <template #header>
+        <div class="card-header">
+          <div class="header-left">
+            <el-icon :size="20" color="#409EFF"><User /></el-icon>
+            <span class="page-title">考核成员单位</span>
+          </div>
+          <div class="search-right">
+            <el-button type="primary" v-hasPermi="['woas:staff:add']" @click="handleAdd">
+              <el-icon><Plus /></el-icon> 新增
+            </el-button>
+            <el-button type="success" v-hasPermi="['woas:staff:edit']" :disabled="single" @click="handleUpdate()">
+              <el-icon><Edit /></el-icon> 修改
+            </el-button>
+            <el-button type="danger" v-hasPermi="['woas:staff:remove']" :disabled="multiple" @click="handleDelete()">
+              <el-icon><Delete /></el-icon> 删除
+            </el-button>
+            <el-button type="warning" v-hasPermi="['woas:staff:export']" @click="handleExport">
+              <el-icon><Download /></el-icon> 导出
+            </el-button>
+          </div>
+        </div>
+      </template>
+
+      <!-- 搜索栏 -->
+      <div class="search-bar" v-show="showSearch">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+          <el-form-item label="成员单位名称" prop="orgName">
+            <el-input v-model="queryParams.orgName" placeholder="请输入成员单位名称" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handleQuery">
+              <el-icon><Search /></el-icon> 搜索
+            </el-button>
+            <el-button @click="resetQuery">
+              <el-icon><RefreshRight /></el-icon> 重置
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 数据列表 -->
+      <el-table v-loading="loading" :data="dataList" style="width: 100%" border @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="45" />
+        <el-table-column label="成员单位名称" align="center" prop="orgName" :show-overflow-tooltip="true" />
+        <el-table-column label="操作" align="center" width="150" fixed="right">
+          <template #default="{ row }">
+            <el-button link type="primary" v-hasPermi="['woas:staff:edit']" @click="handleUpdate(row)"> 编辑 </el-button>
+            <el-button link type="danger" v-hasPermi="['woas:staff:remove']" @click="handleDelete(row)"> 删除 </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination">
+        <el-pagination
+          v-show="total > 0"
+          v-model:current-page="queryParams.pageNum"
+          v-model:page-size="queryParams.pageSize"
+          :total="total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="getList"
+          @current-change="getList"
+        />
+      </div>
+    </el-card>
+
+    <!-- 新增/编辑对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="600px" top="5vh" append-to-body @close="cancel">
       <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
         <el-form-item label="成员单位GUID" prop="orgGuid">
           <el-input v-model="form.orgGuid" placeholder="请输入成员单位GUID" />
@@ -59,127 +85,247 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
+        <el-button @click="dialog.visible = false">取消</el-button>
+        <el-button type="primary" @click="submitForm">确定</el-button>
       </template>
     </el-dialog>
   </div>
 </template>
 
-<script setup name="WoasStaff">
-import { listWoasStaff, getWoasStaff, addWoasStaff, updateWoasStaff, delWoasStaff } from "@/api/slaj/woas";
-import { getCurrentInstance, reactive, ref, toRefs } from "vue";
-
-const { proxy } = getCurrentInstance();
-
-const dataList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const title = ref("");
-
-const columns = ref({
-    orgName: { visible: true }
-});
-
-const data = reactive({
-  form: {},
-  queryParams: { pageNum: 1, pageSize: 10, orgName: null },
+<script setup name="BisWoasStaff" lang="ts">
+import { listWoasStaff, getWoasStaff, addWoasStaff, updateWoasStaff, delWoasStaff } from '@/api/slaj/woas'
+import { Plus, Edit, Delete, Download, Search, RefreshRight, User } from '@element-plus/icons-vue'
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance
+
+const dataList = ref<any[]>([])
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref<Array<string | number>>([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+
+const queryFormRef = ref<ElFormInstance>()
+const formRef = ref<ElFormInstance>()
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+})
+
+const initFormData: any = {
+  guid: null,
+  orgGuid: null,
+  woasGropGuid: null,
+  orgName: null,
+  note: null
+}
+
+const data = reactive<PageData<any, any>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    orgName: null
+  },
   rules: {}
-});
+})
 
-const { form, queryParams, rules } = toRefs(data);
+const { queryParams, form, rules } = toRefs(data)
 
-function getList() {
-  loading.value = true;
-  listWoasStaff(queryParams.value).then(response => {
-    dataList.value = response.rows;
-    total.value = response.total;
-    loading.value = false;
-  });
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  const res = await listWoasStaff(queryParams.value)
+  dataList.value = res.rows
+  total.value = res.total
+  loading.value = false
 }
 
-function handleQuery() {
-  queryParams.value.pageNum = 1;
-  getList();
+/** 取消按钮 */
+const cancel = () => {
+  reset()
+  dialog.visible = false
 }
 
-function resetQuery() {
-  proxy.resetForm("queryRef");
-  handleQuery();
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData }
+  formRef.value?.resetFields()
 }
 
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.guid);
-  single.value = selection.length !== 1;
-  multiple.value = !selection.length;
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1
+  getList()
 }
 
-function handleAdd() {
-  reset();
-  open.value = true;
-  title.value = "添加考核成员单位";
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields()
+  handleQuery()
 }
 
-function handleUpdate(row) {
-  reset();
-  const guid = row.guid || ids.value[0];
-  getWoasStaff(guid).then(response => {
-    form.value = response.data;
-    open.value = true;
-    title.value = "修改考核成员单位";
-  });
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: any[]) => {
+  ids.value = selection.map((item) => item.guid)
+  single.value = selection.length !== 1
+  multiple.value = !selection.length
 }
 
-function submitForm() {
-  proxy.$refs["formRef"].validate(valid => {
-    if (valid) {
-      if (form.value.guid != null) {
-        updateWoasStaff(form.value).then(() => {
-          proxy.$modal.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
-      } else {
-        addWoasStaff(form.value).then(() => {
-          proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
-      }
-    }
-  });
+/** 新增按钮操作 */
+const handleAdd = () => {
+  reset()
+  dialog.visible = true
+  dialog.title = '添加考核成员单位'
 }
 
-function handleDelete(row) {
-  const guids = row.guid || ids.value.join(",");
-  proxy.$modal.confirm('是否确认删除所选数据？').then(function() {
-    return delWoasStaff(guids);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  });
+/** 修改按钮操作 */
+const handleUpdate = async (row?: any) => {
+  reset()
+  const guid = row?.guid || ids.value[0]
+  const res = await getWoasStaff(guid)
+  Object.assign(form.value, res.data)
+  dialog.visible = true
+  dialog.title = '修改考核成员单位'
 }
 
-function handleExport() {
-  proxy.download('/woas/staff/export', { ...queryParams.value }, `考核成员单位_${new Date().getTime()}.xlsx`);
+/** 提交按钮 */
+const submitForm = () => {
+  formRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      form.value.guid ? await updateWoasStaff(form.value) : await addWoasStaff(form.value)
+      proxy?.$modal.msgSuccess('操作成功')
+      dialog.visible = false
+      await getList()
+    }
+  })
 }
 
-function cancel() {
-  open.value = false;
-  reset();
+/** 删除按钮操作 */
+const handleDelete = async (row?: any) => {
+  const guids = row?.guid || ids.value
+  await proxy?.$modal.confirm('是否确认删除所选数据？')
+  await delWoasStaff(guids)
+  await getList()
+  proxy?.$modal.msgSuccess('删除成功')
 }
 
-function reset() {
-  form.value = { guid: null, orgGuid: null, woasGropGuid: null, orgName: null, note: null };
-  proxy.resetForm("formRef");
+/** 导出按钮操作 */
+const handleExport = () => {
+  proxy?.download('/woas/staff/export', { ...queryParams.value }, `考核成员单位_${new Date().getTime()}.xlsx`)
 }
 
-getList();
+onMounted(() => {
+  getList()
+})
 </script>
+
+<style scoped lang="scss">
+.system-page {
+  padding: 0px;
+  background-color: #f5f7fa;
+  min-height: calc(100vh - 10px);
+
+  :deep(.el-input__wrapper) {
+    border-radius: 4px;
+  }
+
+  :deep(.el-textarea__inner) {
+    border-radius: 4px;
+  }
+
+  .page-card {
+    border-radius: 1px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+
+    :deep(.el-card__header) {
+      padding: 15px 20px;
+      border-bottom: 1px solid #ebeef5;
+      background-color: #fff;
+      border-radius: 8px 8px 0 0;
+    }
+
+    :deep(.el-card__body) {
+      padding: 20px;
+      background-color: #fff;
+    }
+  }
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+      .page-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #303133;
+      }
+    }
+
+    .search-right {
+      display: flex;
+      gap: 10px;
+    }
+  }
+
+  .search-bar {
+    margin-bottom: 10px;
+    background-color: #f8faff;
+    padding: 6px 10px;
+    border-radius: 6px;
+    border: 0px solid #e6ebf5;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    :deep(.el-form) {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+
+      .el-form-item {
+        margin-bottom: 0;
+        margin-right: 15px;
+
+        .el-form-item__label {
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  .pagination {
+    margin-top: 8px;
+    margin-bottom: 8px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  :deep(.el-table) {
+    border-radius: 4px;
+    overflow: auto;
+    height: calc(100vh - 195px);
+
+    th.el-table__cell {
+      background-color: #f5f7fa !important;
+      color: #606266;
+      font-weight: 600;
+    }
+
+    .el-button--primary.is-link {
+      color: #409eff;
+    }
+
+    .el-button--danger.is-link {
+      color: #f56c6c;
+    }
+  }
+}
+</style>

gw-ui/src/views/slaj/woas/BisWoasStan.vue

@@ -1,53 +1,79 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px">
-      <el-form-item label="考核报表名称" prop="asseRepoName">
-        <el-input v-model="queryParams.asseRepoName" placeholder="请输入考核报表名称" clearable style="width: 200px" @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-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['woas:stan:add']">新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['woas:stan:edit']">修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['woas:stan:remove']">删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['woas:stan:export']">导出</el-button>
-      </el-col>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns" storageKey="woas-woas-stan-index"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="考核报表名称" align="center" prop="asseRepoName" v-if="columns.asseRepoName.visible" :show-overflow-tooltip="true" />
-      <el-table-column label="填报单位类型" align="center" prop="fillOrgType" v-if="columns.fillOrgType.visible" :show-overflow-tooltip="true" />
-      <el-table-column label="权重系数" align="center" prop="weigCoef" v-if="columns.weigCoef.visible" :show-overflow-tooltip="true" />
-      <el-table-column label="分数上限" align="center" prop="socrLimi" v-if="columns.socrLimi.visible" :show-overflow-tooltip="true" />
-      <el-table-column label="额外加分上限" align="center" prop="bonuLimi" v-if="columns.bonuLimi.visible" :show-overflow-tooltip="true" />
-      <el-table-column label="操作" align="center" class-name="BisWoasStan" width="200">
-        <template #default="scope">
-          <el-tooltip content="修改" placement="top">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['woas:stan:edit']"></el-button>
-          </el-tooltip>
-          <el-tooltip content="删除" placement="top">
-            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['woas:stan:remove']"></el-button>
-          </el-tooltip>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
-
-    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
+  <div class="system-page config-page">
+    <el-card class="page-card">
+      <template #header>
+        <div class="card-header">
+          <div class="header-left">
+            <el-icon :size="20" color="#409EFF"><List /></el-icon>
+            <span class="page-title">考核标准</span>
+          </div>
+          <div class="search-right">
+            <el-button type="primary" v-hasPermi="['woas:stan:add']" @click="handleAdd">
+              <el-icon><Plus /></el-icon> 新增
+            </el-button>
+            <el-button type="success" v-hasPermi="['woas:stan:edit']" :disabled="single" @click="handleUpdate()">
+              <el-icon><Edit /></el-icon> 修改
+            </el-button>
+            <el-button type="danger" v-hasPermi="['woas:stan:remove']" :disabled="multiple" @click="handleDelete()">
+              <el-icon><Delete /></el-icon> 删除
+            </el-button>
+            <el-button type="warning" v-hasPermi="['woas:stan:export']" @click="handleExport">
+              <el-icon><Download /></el-icon> 导出
+            </el-button>
+          </div>
+        </div>
+      </template>
+
+      <!-- 搜索栏 -->
+      <div class="search-bar" v-show="showSearch">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+          <el-form-item label="考核报表名称" prop="asseRepoName">
+            <el-input v-model="queryParams.asseRepoName" placeholder="请输入考核报表名称" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handleQuery">
+              <el-icon><Search /></el-icon> 搜索
+            </el-button>
+            <el-button @click="resetQuery">
+              <el-icon><RefreshRight /></el-icon> 重置
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 数据列表 -->
+      <el-table v-loading="loading" :data="dataList" style="width: 100%" border @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="45" />
+        <el-table-column label="考核报表名称" align="center" prop="asseRepoName" :show-overflow-tooltip="true" />
+        <el-table-column label="填报单位类型" align="center" prop="fillOrgType" :show-overflow-tooltip="true" />
+        <el-table-column label="权重系数" align="center" prop="weigCoef" :show-overflow-tooltip="true" />
+        <el-table-column label="分数上限" align="center" prop="socrLimi" :show-overflow-tooltip="true" />
+        <el-table-column label="额外加分上限" align="center" prop="bonuLimi" :show-overflow-tooltip="true" />
+        <el-table-column label="操作" align="center" width="150" fixed="right">
+          <template #default="{ row }">
+            <el-button link type="primary" v-hasPermi="['woas:stan:edit']" @click="handleUpdate(row)"> 编辑 </el-button>
+            <el-button link type="danger" v-hasPermi="['woas:stan:remove']" @click="handleDelete(row)"> 删除 </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination">
+        <el-pagination
+          v-show="total > 0"
+          v-model:current-page="queryParams.pageNum"
+          v-model:page-size="queryParams.pageSize"
+          :total="total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="getList"
+          @current-change="getList"
+        />
+      </div>
+    </el-card>
+
+    <!-- 新增/编辑对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="600px" top="5vh" append-to-body @close="cancel">
       <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
         <el-form-item label="工作考核GUID" prop="woasGuid">
           <el-input v-model="form.woasGuid" placeholder="请输入工作考核GUID" />
@@ -78,131 +104,252 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
+        <el-button @click="dialog.visible = false">取消</el-button>
+        <el-button type="primary" @click="submitForm">确定</el-button>
       </template>
     </el-dialog>
   </div>
 </template>
 
-<script setup name="WoasStan">
-import { listWoasStan, getWoasStan, addWoasStan, updateWoasStan, delWoasStan } from "@/api/slaj/woas";
-import { getCurrentInstance, reactive, ref, toRefs } from "vue";
-
-const { proxy } = getCurrentInstance();
-
-const dataList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const title = ref("");
-
-const columns = ref({
-    asseRepoName: { visible: true },
-    fillOrgType: { visible: true },
-    weigCoef: { visible: true },
-    socrLimi: { visible: true },
-    bonuLimi: { visible: true }
-});
-
-const data = reactive({
-  form: {},
-  queryParams: { pageNum: 1, pageSize: 10, asseRepoName: null },
+<script setup name="BisWoasStan" lang="ts">
+import { listWoasStan, getWoasStan, addWoasStan, updateWoasStan, delWoasStan } from '@/api/slaj/woas'
+import { Plus, Edit, Delete, Download, Search, RefreshRight, List } from '@element-plus/icons-vue'
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance
+
+const dataList = ref<any[]>([])
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref<Array<string | number>>([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+
+const queryFormRef = ref<ElFormInstance>()
+const formRef = ref<ElFormInstance>()
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+})
+
+const initFormData: any = {
+  guid: null,
+  woasGuid: null,
+  asseRepoName: null,
+  fillOrgType: null,
+  weigCoef: null,
+  socrLimi: null,
+  bonuLimi: null,
+  repoTempId: null,
+  repoThisPath: null,
+  note: null
+}
+
+const data = reactive<PageData<any, any>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    asseRepoName: null
+  },
   rules: {}
-});
+})
 
-const { form, queryParams, rules } = toRefs(data);
+const { queryParams, form, rules } = toRefs(data)
 
-function getList() {
-  loading.value = true;
-  listWoasStan(queryParams.value).then(response => {
-    dataList.value = response.rows;
-    total.value = response.total;
-    loading.value = false;
-  });
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  const res = await listWoasStan(queryParams.value)
+  dataList.value = res.rows
+  total.value = res.total
+  loading.value = false
 }
 
-function handleQuery() {
-  queryParams.value.pageNum = 1;
-  getList();
+/** 取消按钮 */
+const cancel = () => {
+  reset()
+  dialog.visible = false
 }
 
-function resetQuery() {
-  proxy.resetForm("queryRef");
-  handleQuery();
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData }
+  formRef.value?.resetFields()
 }
 
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.guid);
-  single.value = selection.length !== 1;
-  multiple.value = !selection.length;
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1
+  getList()
 }
 
-function handleAdd() {
-  reset();
-  open.value = true;
-  title.value = "添加考核标准";
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields()
+  handleQuery()
 }
 
-function handleUpdate(row) {
-  reset();
-  const guid = row.guid || ids.value[0];
-  getWoasStan(guid).then(response => {
-    form.value = response.data;
-    open.value = true;
-    title.value = "修改考核标准";
-  });
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: any[]) => {
+  ids.value = selection.map((item) => item.guid)
+  single.value = selection.length !== 1
+  multiple.value = !selection.length
 }
 
-function submitForm() {
-  proxy.$refs["formRef"].validate(valid => {
-    if (valid) {
-      if (form.value.guid != null) {
-        updateWoasStan(form.value).then(() => {
-          proxy.$modal.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
-      } else {
-        addWoasStan(form.value).then(() => {
-          proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
-      }
-    }
-  });
+/** 新增按钮操作 */
+const handleAdd = () => {
+  reset()
+  dialog.visible = true
+  dialog.title = '添加考核标准'
 }
 
-function handleDelete(row) {
-  const guids = row.guid || ids.value.join(",");
-  proxy.$modal.confirm('是否确认删除所选数据？').then(function() {
-    return delWoasStan(guids);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  });
+/** 修改按钮操作 */
+const handleUpdate = async (row?: any) => {
+  reset()
+  const guid = row?.guid || ids.value[0]
+  const res = await getWoasStan(guid)
+  Object.assign(form.value, res.data)
+  dialog.visible = true
+  dialog.title = '修改考核标准'
 }
 
-function handleExport() {
-  proxy.download('/woas/stan/export', { ...queryParams.value }, `考核标准_${new Date().getTime()}.xlsx`);
+/** 提交按钮 */
+const submitForm = () => {
+  formRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      form.value.guid ? await updateWoasStan(form.value) : await addWoasStan(form.value)
+      proxy?.$modal.msgSuccess('操作成功')
+      dialog.visible = false
+      await getList()
+    }
+  })
 }
 
-function cancel() {
-  open.value = false;
-  reset();
+/** 删除按钮操作 */
+const handleDelete = async (row?: any) => {
+  const guids = row?.guid || ids.value
+  await proxy?.$modal.confirm('是否确认删除所选数据？')
+  await delWoasStan(guids)
+  await getList()
+  proxy?.$modal.msgSuccess('删除成功')
 }
 
-function reset() {
-  form.value = { guid: null, woasGuid: null, asseRepoName: null, fillOrgType: null, weigCoef: null, socrLimi: null, bonuLimi: null, repoTempId: null, repoThisPath: null, note: null };
-  proxy.resetForm("formRef");
+/** 导出按钮操作 */
+const handleExport = () => {
+  proxy?.download('/woas/stan/export', { ...queryParams.value }, `考核标准_${new Date().getTime()}.xlsx`)
 }
 
-getList();
+onMounted(() => {
+  getList()
+})
 </script>
+
+<style scoped lang="scss">
+.system-page {
+  padding: 0px;
+  background-color: #f5f7fa;
+  min-height: calc(100vh - 10px);
+
+  :deep(.el-input__wrapper) {
+    border-radius: 4px;
+  }
+
+  :deep(.el-textarea__inner) {
+    border-radius: 4px;
+  }
+
+  .page-card {
+    border-radius: 1px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+
+    :deep(.el-card__header) {
+      padding: 15px 20px;
+      border-bottom: 1px solid #ebeef5;
+      background-color: #fff;
+      border-radius: 8px 8px 0 0;
+    }
+
+    :deep(.el-card__body) {
+      padding: 20px;
+      background-color: #fff;
+    }
+  }
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+      .page-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #303133;
+      }
+    }
+
+    .search-right {
+      display: flex;
+      gap: 10px;
+    }
+  }
+
+  .search-bar {
+    margin-bottom: 10px;
+    background-color: #f8faff;
+    padding: 6px 10px;
+    border-radius: 6px;
+    border: 0px solid #e6ebf5;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    :deep(.el-form) {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+
+      .el-form-item {
+        margin-bottom: 0;
+        margin-right: 15px;
+
+        .el-form-item__label {
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  .pagination {
+    margin-top: 8px;
+    margin-bottom: 8px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  :deep(.el-table) {
+    border-radius: 4px;
+    overflow: auto;
+    height: calc(100vh - 195px);
+
+    th.el-table__cell {
+      background-color: #f5f7fa !important;
+      color: #606266;
+      font-weight: 600;
+    }
+
+    .el-button--primary.is-link {
+      color: #409eff;
+    }
+
+    .el-button--danger.is-link {
+      color: #f56c6c;
+    }
+  }
+}
+</style>