种植规划和土地巡查

sub-government-affairs-service/src/App.vue

@@ -23,5 +23,5 @@ const size = computed(() => SettingStore.themeConfig.globalComSize);
 </script>
 
 <style lang="scss">
-@import './styles/style.scss';
+@import './styles/style';
 </style>

sub-government-affairs-service/src/components/CustCard.vue

@@ -15,7 +15,7 @@ const props = defineProps({
 
 <style lang="scss">
 .el-card:has(.custom_content_card_) {
-  border-radius: 10px !important;
   border: none !important;
+  border-radius: 10px !important;
 }
 </style>

sub-government-affairs-service/src/layouts/component/Avatar/index.vue

@@ -70,10 +70,11 @@ const logOut = async () => {
 .layout-avatar {
   &-name {
     margin-left: 8px;
-    @include ellipsis();
+    @include ellipsis;
   }
   .el-dropdown-link {
-    @include flex-row();
+    @include flex-row;
+
     align-items: center;
     cursor: pointer;
   }

sub-government-affairs-service/src/layouts/component/Breadcrumb/index.vue

@@ -38,7 +38,8 @@ const matched = computed(() => route.matched.filter((item) => item.meta && item.
 </script>
 <style lang="scss" scoped>
 .layout-breadcrumb {
-  @include flex-row();
+  @include flex-row;
+
   align-items: center;
   white-space: nowrap;
 }

sub-government-affairs-service/src/layouts/component/Hamburger/index.vue

@@ -25,15 +25,13 @@ const handleCollapse = () => {
 </script>
 <style lang="scss" scoped>
 .layout-hamburger {
-  padding: 0px 15px;
-  height: 100%;
   display: flex;
   align-items: center;
-
+  padding: 0 15px;
+  height: 100%;
   &:hover {
-    background: rgba(0, 0, 0, 0.025);
+    background: rgb(0 0 0 / 2.5%);
   }
-
   .icon {
     font-size: 24px;
     cursor: pointer;

sub-government-affairs-service/src/layouts/component/Header/index.vue

@@ -54,11 +54,10 @@ const stylePlaceholder = () => {
 .layout-header {
   width: 100%;
   background: white;
+  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
   transition: width 0.28s;
   flex-shrink: 0;
   box-sizing: border-box;
-  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
-
   &.fixed-header {
     position: fixed;
     top: 0;
@@ -71,41 +70,38 @@ const stylePlaceholder = () => {
   &.no-collapse {
     width: calc(100% - 210px);
   }
-
   &-placeholder {
     height: 50px;
   }
-
   &-inner {
-    @include flex-row();
+    @include flex-row;
-    align-items: center;
+
     justify-content: space-between;
-    height: 50px;
+    align-items: center;
-    width: 100%;
     padding: 0 10px 0 0;
-    border-bottom: 1px solid #eee;
+    width: 100%;
+    height: 50px;
+    border-bottom: 1px solid #eeeeee;
     box-sizing: border-box;
   }
-
   &-left {
-    @include flex-row();
+    @include flex-row;
+
     align-items: center;
     height: 100%;
   }
-
   &-right {
-    @include flex-row();
+    @include flex-row;
+
     align-items: center;
   }
-
   &-tool {
-    padding: 4px;
     margin-right: 10px;
+    padding: 4px;
     cursor: pointer;
-
     :deep(.el-icon) {
       font-size: 20px;
-      color: #333;
+      color: #333333;
     }
   }
 }

sub-government-affairs-service/src/layouts/component/Logo/index.vue

@@ -25,21 +25,19 @@ const { VITE_APP_TITLE } = import.meta.env;
 
 <style lang="scss" scoped>
 .logo {
-  overflow: hidden;
-  @include flex-row();
-  align-items: center;
-  padding: 7px 5px;
-  margin-bottom: 2px;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-  transition: all 0.28s;
   justify-content: center;
-
+  align-items: center;
+  overflow: hidden;
+  margin-bottom: 2px;
+  padding: 7px 5px;
+  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
+  transition: all 0.28s;
+  @include flex-row;
   &-picture {
+    margin: 0 auto;
     width: 70px;
     height: 35px;
-    margin: 0 auto;
   }
-
   &-title {
     height: 35px;
     line-height: 35px;

sub-government-affairs-service/src/layouts/component/Main/index.vue

@@ -35,14 +35,14 @@ const isReload = computed(() => SettingStore.isReload);
   display: flex;
   width: 100%;
   height: 100%;
-  @include scrollable();
+  @include scrollable;
-  box-sizing: border-box;
 
+  box-sizing: border-box;
   &-inner {
-    width: 100%;
     padding: 10px;
-    box-sizing: border-box;
+    width: 100%;
     background-color: #f5f5f5;
+    box-sizing: border-box;
   }
 }
 </style>

sub-government-affairs-service/src/layouts/component/Sider/index.vue

@@ -57,32 +57,28 @@ const activeMenu = computed(() => {
 
 <style lang="scss" scoped>
 .layout-sider {
-  overflow: hidden;
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   z-index: 98;
+  overflow: hidden;
   width: 210px;
   height: 100%;
-  background-color: #fff;
+  background-color: #ffffff;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
   transition: width 0.28s;
-
   &-scrollbar {
     height: calc(100vh - 60px) !important;
   }
   :deep(.el-scrollbar__wrap) {
     height: calc(100vh - 60px) !important;
   }
-
   &-menu {
     border-right: 0;
-
     :deep(.el-menu-item.is-active) {
       background-color: #f5f5f5;
     }
-
     &:not(.el-menu--collapse) {
       height: 100%;
     }

sub-government-affairs-service/src/layouts/component/TagsView/index.vue

@@ -126,20 +126,18 @@ const removeTab = async (activeTabPath) => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-left: 10px;
   padding-right: 10px;
+  padding-left: 10px;
   background: white;
-
   &-inner {
     flex: 1;
     overflow: hidden;
     box-sizing: border-box;
-
     .el-tabs--card :deep(.el-tabs__header) {
-      box-sizing: border-box;
-      height: 40px;
-      padding: 0 10px;
       margin: 0;
+      padding: 0 10px;
+      height: 40px;
+      box-sizing: border-box;
     }
     :deep(.el-tabs) {
       .el-tabs__nav {
@@ -147,15 +145,14 @@ const removeTab = async (activeTabPath) => {
       }
       .el-tabs__header .el-tabs__item {
         border: none;
-        color: #ccc;
+        color: #cccccc;
       }
       .el-tabs__header .el-tabs__item.is-active {
-        color: $color-primary;
         border-bottom: 2px solid $color-primary;
+        color: $color-primary;
       }
     }
   }
-
   &-more {
     height: 100%;
     flex-shrink: 0;

sub-government-affairs-service/src/layouts/index.vue

@@ -31,27 +31,24 @@ const SettingStore = useSettingStore();
 
 <style lang="scss" scoped>
 .basic-layout {
-  height: 100%;
   width: 100%;
   min-width: 1200px;
-
+  height: 100%;
   &.hideSider {
     :deep(.layout-sider) {
       width: 60px !important;
     }
-
     .basic-layout-container {
       margin-left: 60px !important;
     }
   }
-
   &-container {
     position: relative;
-    @include flex-column();
-    height: 100%;
     margin-left: 210px;
-    box-sizing: border-box;
+    height: 100%;
     transition: margin-left 0.28s;
+    box-sizing: border-box;
+    @include flex-column;
   }
 }
 </style>

sub-government-affairs-service/src/styles/common/define.scss

@@ -8,27 +8,25 @@
     flex-direction: column;
   }
 }
-
 .custom-page {
   padding: 20px;
-  background: #fff;
   border-radius: 10px;
+  background: #ffffff;
 }
-
 .custom-form {
   &__title {
     padding: 10px 0;
     font-size: 15px;
     font-weight: bold;
     color: $color-333;
-
     &::before {
-      @include icon-space();
+      @include icon-space;
-      width: 4px;
+
-      background: $color-primary;
-      height: 1.15em;
-      vertical-align: -0.25em;
       margin-right: 8px;
+      width: 4px;
+      height: 1.15em;
+      background: $color-primary;
+      vertical-align: -0.25em;
     }
   }
   &__panel {
@@ -79,10 +77,7 @@
     &__img,
     &__icon {
       position: absolute !important;
-      top: 0;
+      inset: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
       margin: auto;
     }
     &__img {
@@ -117,7 +112,7 @@
   &__tips {
     padding-left: 3px;
     font-size: 12px;
-    color: #999;
+    color: #999999;
   }
   &__note {
     font-size: 12px;
@@ -131,7 +126,6 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-
     .el-tooltip__trigger {
       margin: 0 3px;
     }

sub-government-affairs-service/src/styles/style.scss

@@ -1,7 +1,6 @@
-@import 'common/base.scss';
+@import 'common/base';
-@import 'common/define.scss';
+@import 'common/define';
 @import '@/assets/fonts/iconfont.css';
-
 #app {
   position: relative;
   width: 100%;
@@ -11,7 +10,6 @@
   -moz-osx-font-smoothing: grayscale;
   background-color: #f5f5f5;
 }
-
 .el-dialog__body {
   overflow: hidden auto;
   height: auto;

sub-government-affairs-service/src/styles/utils/_scrollable.scss

@@ -1,5 +1,4 @@
 @mixin scrollable() {
-  overflow-x: hidden;
+  overflow: hidden auto;
-  overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }

sub-government-affairs-service/src/styles/utils/_scrollbar.scss

@@ -12,11 +12,9 @@
     width: $size;
     height: $size;
   }
-
   ::-webkit-scrollbar-thumb {
     background: $foreground-color;
   }
-
   ::-webkit-scrollbar-track {
     background: $background-color;
   }

sub-government-affairs-service/src/views/landManage/component/landPartol/index.vue

@@ -1,19 +1,197 @@
 <template>
   <section>土地巡查</section>
+  <div class="options_btns">
+    <el-button v-for="(item, i) in btns" :key="'btns_' + i" type="primary" @click="item.method">
+      {{ item.label }}
+    </el-button>
+  </div>
+  <el-table :data="list">
+    <el-table-column type="selection" width="55" />
+    <el-table-column type="index"> </el-table-column>
+    <el-table-column label="任务编号" prop="landName" show-overflow-tooltip />
+    <el-table-column label="任务名称" prop="address" show-overflow-tooltip />
+    <el-table-column label="任务成员" prop="owner" show-overflow-tooltip />
+    <el-table-column label="巡查类型" prop="landClassificationType" show-overflow-tooltip />
+    <el-table-column label="巡查注意事项" prop="978.2" show-overflow-tooltip />
+    <el-table-column label="巡查对象" prop="coordinate" show-overflow-tooltip />
+    <el-table-column label="是否违法" prop="landTransfer" show-overflow-tooltip>
+      <template #default="{ row }">
+        {{ !row.landTransfer ? '是' : '否' }}
+      </template>
+    </el-table-column>
+    <el-table-column label="状态" prop="landTransfer" show-overflow-tooltip>
+      <template #default="{ row }">
+        {{ !row.landTransfer ? '是' : '否' }}
+      </template>
+    </el-table-column>
+    <el-table-column fixed="right" label="操作" width="200" show-overflow-tooltip>
+      <el-button type="primary" @click="doResults()">登记结果</el-button>
+    </el-table-column>
+  </el-table>
+  <Pagina :page-data="pageData" />
+  <el-dialog v-model="infoVisible" title="新增巡查" width="1000" center>
+    <el-form ref="infoRef" :model="infoData" :rules="infoRules">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="任务编号:" prop="num">
+            <el-input v-model="infoData.num" placeholder="请输入" style="width: 240px"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="任务名称" prop="name">
+            <el-input v-model="infoData.gridName" placeholder="请输入面积" style="width: 240px"></el-input>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item label="任务成员" prop="member">
+            <el-select v-model="infoData.member" :multiple="true" placeholder="请选择任务成员" style="width: 240px" :clearable="true">
+              <el-option v-for="item in memberOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="巡查类型" prop="gridName">
+            <el-select v-model="infoData.type" placeholder="请选择巡查类型" style="width: 240px" :clearable="true">
+              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="巡查注意事项" prop="gridName">
+            <el-input
+              v-model="infoData.mark"
+              :autosize="{ minRows: 2, maxRows: 4 }"
+              type="textarea"
+              laceholder="请输入巡查注意事项"
+              style="width: 240px"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="巡查对象" prop="gridName">
+            <el-select v-model="infoData.target" placeholder="请选择巡查对象" style="width: 240px" :clearable="true">
+              <el-option v-for="item in objOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="infoCancel">取消</el-button>
+        <el-button type="primary" @click="subMitInfo(infoRef)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, reactive } from 'vue';
 
 /* --------------- data --------------- */
 // #region
+const btns = reactive([
+  {
+    label: '新增巡查',
+    method: function () {
+      console.log('add');
+      infoVisible.value = true;
+    },
+  },
+  {
+    label: '导出',
+    disabled: true,
+    method: function () {
+      console.log('export');
+    },
+  },
+]);
+
+const pageData = reactive({
+  page: 1,
+  size: 10,
+  total: 0,
+});
+const list = ref([]);
+const infoVisible = ref(false);
+const infoRef = ref();
+const infoData = reactive({
+  num: '',
+  name: '',
+  member: [],
+  type: '',
+  mark: '',
+  target: '',
+});
+
+const memberOptions = reactive([
+  {
+    value: '成员1',
+    label: 'Option1',
+  },
+  {
+    value: '成员2',
+    label: 'Option2',
+  },
+]);
+
+const typeOptions = reactive([
+  {
+    value: '巡查类型1',
+    label: 'Option1',
+  },
+  {
+    value: '巡查类型2',
+    label: 'Option2',
+  },
+]);
+
+const objOptions = reactive([
+  {
+    value: '巡查对象1',
+    label: 'Option1',
+  },
+  {
+    value: '巡查对象2',
+    label: 'Option2',
+  },
+]);
 
 // #endregion
 
 /* --------------- methods --------------- */
+
+const doResults = () => {
+  console.info('登记结果');
+};
+
+const subMitInfo = (formEl) => {
+  if (!formEl) return;
+  formEl.validate((valid) => {
+    if (valid) {
+      infoHide();
+      console.log('submit!');
+    } else {
+      console.log('error submit!');
+    }
+  });
+};
+
+const infoCancel = () => {
+  infoHide();
+};
+
+const infoHide = () => {
+  infoVisible.value = false;
+};
 // #region
 
 // #endregion
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.options_btns {
+  margin: 16px 0;
+}
+</style>

sub-government-affairs-service/src/views/landManage/component/landsManage/index.vue

@@ -155,8 +155,8 @@ function handleResetSearch() {
 
 <style lang="scss" scoped>
 .lands_types {
-  width: 100%;
   justify-content: center;
+  width: 100%;
   > label {
     width: 12%;
     ::v-deep() {

sub-government-affairs-service/src/views/landManage/component/plantPlan/index.vue

@@ -1,9 +1,144 @@
 <template>
   <CustCard>
-    <el-row>
+    <el-form ref="searchRef" :model="searchCondition">
-      <el-col></el-col>
+      <el-row :gutter="20">
-    </el-row>
+        <el-col :span="6">
+          <el-form-item label="地块名:" prop="landName">
+            <el-input v-model="searchCondition.landName" placeholder="请输入"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="种植产物" prop="gridName">
+            <el-input v-model="searchCondition.gridName" placeholder="请输入"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="产权人" prop="owner">
+            <el-input v-model="searchCondition.owner" placeholder="请输入"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary" @click="getList()">查询</el-button>
+          <el-button type="" @click="handleResetSearch">重置</el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div class="options_btns">
+      <el-button v-for="(item, i) in btns" :key="'btns_' + i" type="primary" @click="item.method">
+        {{ item.label }}
+      </el-button>
+    </div>
+    <el-table :data="list">
+      <el-table-column type="selection" width="55" />
+      <el-table-column type="index"> </el-table-column>
+      <el-table-column label="地块名" prop="landName" width="240" show-overflow-tooltip />
+      <el-table-column label="地址" prop="address" show-overflow-tooltip />
+      <el-table-column label="产权人" prop="owner" show-overflow-tooltip />
+      <el-table-column label="农用地分类" prop="landClassificationType" show-overflow-tooltip />
+      <el-table-column label="面积" prop="978.2" show-overflow-tooltip />
+      <el-table-column label="坐标" prop="coordinate" show-overflow-tooltip />
+      <el-table-column label="土壤类型" prop="soilType" show-overflow-tooltip />
+      <el-table-column label="种植产物" prop="" show-overflow-tooltip />
+      <el-table-column label="种子供应商" prop="" show-overflow-tooltip />
+      <el-table-column label="年度计划" prop="" show-overflow-tooltip />
+      <el-table-column label="种植日期" prop="" show-overflow-tooltip />
+      <el-table-column fixed="right" label="操作" width="200" show-overflow-tooltip>
+        <el-button type="primary" @click="doEdit()">编辑</el-button>
+        <el-button type="danger" @click="doDel()">删除</el-button>
+      </el-table-column>
+    </el-table>
     <Pagina :page-data="pageData" />
+    <el-dialog v-model="infoVisible" title="种植规划" width="1000" center>
+      <el-form ref="infoRef" :model="infoData" :rules="infoRules">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="地块名:" prop="landName">
+              <el-input v-model="infoData.landName" placeholder="请输入" style="width: 240px"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="面积" prop="gridName">
+              <el-input v-model="infoData.gridName" placeholder="请输入面积" style="width: 240px"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="种植产物" prop="gridName">
+              <el-input v-model="infoData.gridName" placeholder="请输入种植产物" style="width: 240px"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="种植日期" prop="gridName">
+              <el-date-picker
+                v-model="infoData.date"
+                type="date"
+                placeholder="请选择种植日期"
+                :disabled-date="disabledDate"
+                :shortcuts="shortcuts"
+                :size="size"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="种子供应商" prop="gridName">
+              <el-input v-model="infoData.gridName" placeholder="请输入种子供应商" style="width: 240px"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="年度计划" prop="gridName">
+              <el-select v-model="infoData.plan" placeholder="请选择年度计划" style="width: 240px" :clearable="true">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="infoCancel">取消</el-button>
+          <el-button type="primary" @click="subMitInfo(infoRef)"> 确认 </el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <div>
+      <el-text class="mx-1" size="large">种植阶段详情</el-text>
+      <div style="margin-top: 16px">
+        <el-form ref="stageRef" :model="stageInfo">
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-button type="primary" @click="addSub">新增</el-button>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="所属阶段" prop="gridName">
+                <el-select v-model="stageInfo.stage" placeholder="请选择所属阶段" style="width: 240px" :clearable="true">
+                  <el-option v-for="item in stageOptions" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-button type="primary" @click="getStageList()">查询</el-button>
+              <el-button type="" @click="handleResetStage">重置</el-button>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-table :data="sublist">
+          <el-table-column type="selection" width="55" />
+          <el-table-column type="index"> </el-table-column>
+          <el-table-column label="所属阶段" prop="landName" width="240" show-overflow-tooltip />
+          <el-table-column label="作业计划" prop="address" show-overflow-tooltip />
+          <el-table-column label="作业时间" prop="owner" show-overflow-tooltip />
+          <el-table-column label="结束时间" prop="owner" show-overflow-tooltip />
+          <el-table-column fixed="right" label="操作" width="200" show-overflow-tooltip>
+            <el-button type="primary" @click="doSubEdit()">编辑</el-button>
+            <el-button type="danger" @click="doSubDel()">删除</el-button>
+          </el-table-column>
+        </el-table>
+        <Pagina :page-data="subPageData" />
+      </div>
+    </div>
   </CustCard>
 </template>
 
@@ -12,13 +147,16 @@ import { ref, reactive, onMounted } from 'vue';
 import Pagina from '@/components/pagina.vue';
 import CustCard from '@/components/CustCard.vue';
 import { getLandsList } from '@/apis/land.js';
-
+import { useApp } from '@/hooks';
 onMounted(() => {
   getList();
 });
 
 /* --------------- data --------------- */
 // #region
+const app = useApp();
+const searchRef = ref();
+
 const searchCondition = reactive({
   name: '',
   person: '',
@@ -29,6 +167,76 @@ const pageData = reactive({
   total: 0,
 });
 
+const infoVisible = ref(false);
+const infoRef = ref();
+const list = ref([]);
+const btns = reactive([
+  {
+    label: '新增种植规划',
+    method: function () {
+      console.log('add');
+      infoVisible.value = true;
+    },
+  },
+  {
+    label: '导入',
+    disabled: false,
+    method: function () {
+      console.log('import');
+    },
+  },
+  {
+    label: '导出',
+    disabled: true,
+    method: function () {
+      console.log('export');
+    },
+  },
+]);
+
+const infoData = reactive({
+  landName: '',
+  gridName: '',
+  owner: '',
+  date: '',
+  plan: '',
+});
+
+const infoRules = reactive({
+  landName: [{ required: true, message: '请输入地块名', trigger: 'blur' }],
+});
+const options = reactive([
+  {
+    value: '年度计划1',
+    label: 'Option1',
+  },
+  {
+    value: '年度计划2',
+    label: 'Option2',
+  },
+]);
+
+const subPageData = reactive({
+  page: 1,
+  size: 10,
+  total: 0,
+});
+const sublist = ref([]);
+const stageInfo = reactive({
+  stage: '',
+});
+const stageRef = ref();
+const stageOptions = reactive([
+  {
+    value: '阶段1',
+    label: 'Option1',
+  },
+  {
+    value: '阶段2',
+    label: 'Option2',
+  },
+]);
+
 // #endregion
 
 /* --------------- methods --------------- */
@@ -40,12 +248,90 @@ async function getList() {
   console.log('res ---------', res);
 }
 
+function handleResetSearch() {
+  searchRef.value && searchRef.value.resetFields();
+  getLandsList();
+}
+
+function doEdit() {
+  console.info('编辑');
+  infoVisible.value = true;
+}
+
+function doDel() {
+  console.info('删除');
+  app
+    .$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(() => {
+      // DeleteEntity({ ids: ids.join(',') })
+      //   .then((res) => {
+      //     if (res.code === 200) {
+      //       app.$message.success('删除成功！');
+      //       loadData();
+      //     }
+      //   })
+      //   .catch((err) => {
+      //     app.$message.error(err.msg);
+      //   });
+    })
+    .catch(() => {});
+}
+
+const subMitInfo = (formEl) => {
+  if (!formEl) return;
+  formEl.validate((valid) => {
+    if (valid) {
+      infoHide();
+      console.log('submit!');
+    } else {
+      console.log('error submit!');
+    }
+  });
+};
+
+const infoCancel = () => {
+  infoHide();
+};
+
+const infoHide = () => {
+  infoVisible.value = false;
+};
+
+const addSub = () => {
+  console.log('新增阶段');
+};
+
+async function getStageList() {
+  // const params = { current: pageData.page, size: pageData.size };
+  // let res = await getLandsList(params);
+  // console.log('res ---------', res);
+}
+
+function handleResetStage() {
+  stageRef.value && stageRef.value.resetFields();
+  stageInfo.stage = '';
+  console.info('重置所属阶段筛选条件');
+  getStageList();
+}
+
+const doSubEdit = () => {
+  console.log('编辑sub');
+};
+
+const doSubDel = () => {
+  console.log('删除sub');
+};
+
 // #endregion
 </script>
 
 <style lang="scss" scoped>
 .container {
-  background-color: #fff;
   border-radius: 4px;
+  background-color: #ffffff;
 }
 </style>

sub-government-affairs-service/src/views/trace/search/index.vue

@@ -49,42 +49,37 @@ const onSearch = () => {
 </script>
 <style lang="scss" scoped>
 .search {
-  @include flex-column();
+  @include flex-column;
+
   align-items: center;
   padding: 80px 20px 20px;
   box-sizing: border-box;
-
   &-bar {
-    width: 600px;
     margin-bottom: 80px;
-    @include flex-row();
+    width: 600px;
-
+    @include flex-row;
     &-btn {
       margin-left: -5px;
     }
   }
-
   &-title {
-    color: $color-primary;
     margin-bottom: 80px;
     font-size: 30px;
     text-align: center;
+    color: $color-primary;
   }
-
   &-panel {
     display: flex;
-    align-items: center;
     justify-content: center;
-    gap: 20px;
+    align-items: center;
     width: 100%;
+    gap: 20px;
   }
-
   &-card {
     flex: 1;
     max-width: 200px;
     cursor: pointer;
     transition: transform 0.3s;
-
     &-item {
       display: flex;
       flex-direction: column;
@@ -92,7 +87,6 @@ const onSearch = () => {
       gap: 15px;
       padding: 20px;
     }
-
     .icon {
       display: block;
       width: 80px;
@@ -101,17 +95,15 @@ const onSearch = () => {
         width: 100%;
       }
     }
-
     .text {
-      color: $color-primary;
       font-size: 16px;
+      color: $color-primary;
     }
-
     &-connector {
       width: 160px;
       height: 3px;
-      background-color: $color-success;
       border-radius: 2px;
+      background-color: $color-success;
       flex-shrink: 0;
     }
   }

sub-government-affairs-service/src/views/trace/search/info.vue

@@ -216,82 +216,66 @@ const onBack = () => {
 .detail {
   display: flex;
   min-height: 100%;
-
   &-left {
     width: 200px;
-
     .menu-vertical {
       height: 100%;
       border-right: 0 !important;
     }
   }
-
   &-right {
     flex: 1;
     padding: 20px;
-
     &-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 20px;
-
       span {
         font-size: 16px;
         color: $color-999;
       }
     }
   }
-
   &-card {
     margin-bottom: 20px;
-
     &-info {
       display: flex;
       gap: 40px;
-
       .info-card {
         margin-bottom: 20px;
       }
     }
   }
 }
-
 .product {
   width: 100%;
   text-align: center;
-
   &-left {
     flex: 1;
   }
-
   &-right {
     width: 300px;
   }
-
   &-image {
     width: 100%;
     height: 300px;
     border-radius: 8px;
     object-fit: cover;
   }
-
   &-text {
+    padding: 40px 0;
     font-size: 16px;
     color: $color-primary;
-    padding: 40px 0;
   }
 }
-
 :deep(.el-descriptions__label) {
   width: 120px;
 }
-
 :deep(.el-menu-item) {
   display: flex;
   align-items: center;
 }
-
 :deep(.el-menu-item .el-icon) {
   margin-right: 8px;
 }