feiniao-be-data/src/views/planting/index.vue

<template>
  <div class="planting-page">
    <div class="page-card">
      <!-- 顶部：Tab -->
      <div class="page-header">
        <div class="page-tabs">
          <div
            v-for="tab in tabs"
            :key="tab.value"
            class="page-tabs__item"
            :class="{ 'is-active': activeTab === tab.value }"
            @click="activeTab = tab.value"
          >
            {{ tab.label }}
          </div>
        </div>
      </div>

      <!-- 种植方案 -->
      <template v-if="activeTab === 'scheme'">
        <div class="filter-panel">
          <div class="filter-row">
            <span class="filter-label">区域：</span>
            <div class="filter-content region-selects">
              <el-select v-model="filters.province" placeholder="选择省份" clearable class="region-select">
                <el-option
                  v-for="item in provinceOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select v-model="filters.city" placeholder="选择城市" clearable class="region-select">
                <el-option
                  v-for="item in cityOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>

          <div class="filter-row">
            <span class="filter-label">品类：</span>
            <div class="filter-content tag-list">
              <div
                v-for="(item, idx) in categoryOptions"
                :key="`category-${idx}`"
                class="filter-tag"
                :class="{ 'is-active': filters.categoryIndex === idx }"
                @click="filters.categoryIndex = idx"
              >
                {{ item }}
              </div>
            </div>
          </div>

          <div class="filter-row">
            <span class="filter-label">品种：</span>
            <div class="filter-content tag-list">
              <div
                v-for="(item, idx) in varietyOptions"
                :key="`variety-${idx}`"
                class="filter-tag"
                :class="{ 'is-active': filters.varietyIndex === idx }"
                @click="filters.varietyIndex = idx"
              >
                {{ item }}
              </div>
            </div>
          </div>
        </div>

        <div class="table-wrap">
          <el-table
            :data="tableData"
            border
            class="scheme-table"
            :header-cell-style="headerCellStyle"
            :cell-style="{ verticalAlign: 'top' }"
          >
            <el-table-column prop="name" label="农事名称" min-width="110" fixed />
            <el-table-column label="农事类型" min-width="120">
              <template #default="{ row }">
                <div class="type-tags">
                  <span v-for="(item, idx) in row.types" :key="idx" class="type-tag">{{ item }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="trigger" label="触发条件" min-width="160" />
            <el-table-column label="药肥处方" min-width="260">
              <template #default="{ row }">
                <div class="prescription">
                  <div class="prescription__title">{{ row.prescription.category }}</div>
                  <div
                    v-for="(line, idx) in row.prescription.lines"
                    :key="idx"
                    class="prescription__line"
                  >
                    {{ line }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="执行规程" align="center">
              <el-table-column label="执行窗口" min-width="140" prop="execute.window" />
              <el-table-column label="执行设备" min-width="120">
                <template #default="{ row }">
                  <div class="type-tags">
                    <span
                      v-for="(item, idx) in row.execute.devices"
                      :key="idx"
                      class="type-tag"
                    >{{ item }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="注意事项" min-width="160" prop="execute.notes" />
            </el-table-column>
            <el-table-column label="复核规程" align="center">
              <el-table-column label="复核时间" min-width="120">
                <template #default="{ row }">
                  <span class="review-time">
                    执行后 <em class="review-time__num">{{ row.review.days }}</em> 天
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="复核标准" prop="review.standard" min-width="160" />
            </el-table-column>
          </el-table>
        </div>

        <div class="page-footer">
          <el-button type="warning" plain class="btn-copy" @click="onCopyScheme">
            复制为我的方案
          </el-button>
        </div>
      </template>

      <!-- 我的方案 -->
      <MySchemePanel v-else @edit-scheme="onEditMyScheme" />
    </div>

    <EditSchemeDialog v-model="editDialogVisible" @confirm="onEditConfirm" />
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import EditSchemeDialog from "./components/EditSchemeDialog.vue";
import MySchemePanel from "./components/MySchemePanel.vue";

const tabs = [
  { label: "种植方案", value: "scheme" },
  { label: "我的方案", value: "mine" },
];
const activeTab = ref("scheme");
const editDialogVisible = ref(false);

const filters = reactive({
  province: "",
  city: "",
  categoryIndex: 0,
  varietyIndex: 0,
});

const provinceOptions = [
  { label: "广东省", value: "guangdong" },
  { label: "广西壮族自治区", value: "guangxi" },
  { label: "海南省", value: "hainan" },
];

const cityOptions = [
  { label: "广州市", value: "guangzhou" },
  { label: "深圳市", value: "shenzhen" },
  { label: "茂名市", value: "maoming" },
];

const categoryOptions = ["荔枝", "水稻", "水稻", "水稻", "水稻", "水稻", "水稻"];
const varietyOptions = ["妃子笑", "桂味", "桂味", "桂味", "桂味", "桂味", "桂味", "桂味", "桂味", "桂味"];

const placeholderText =
  "触发条件触发条件触发条件触发条件触发条件触发条件触发条件触发条件触发条件触发条件";

const tableData = ref([
  {
    name: "播前基肥",
    types: ["标准农事", "日常营养", "水肥类"],
    trigger: placeholderText,
    prescription: {
      category: "营养类",
      lines: [
        "砂土: 产品名称/用量/亩 使用次数",
        "粘土: 产品名称/用量/亩 使用次数",
        "壤土: 产品名称/用量/亩 使用次数",
      ],
    },
    execute: {
      window: "生育期起始-生育期结束",
      devices: ["农机设备一", "农机设备二", "农机设备三"],
      notes: placeholderText,
    },
    review: {
      days: 7,
      standard: placeholderText,
    },
  },
  {
    name: "播前基肥",
    types: ["标准农事", "日常营养", "水肥类"],
    trigger: placeholderText,
    prescription: {
      category: "营养类",
      lines: [
        "砂土: 产品名称/用量/亩 使用次数",
        "粘土: 产品名称/用量/亩 使用次数",
        "壤土: 产品名称/用量/亩 使用次数",
      ],
    },
    execute: {
      window: "生育期起始-生育期结束",
      devices: ["农机设备一", "农机设备二", "农机设备三"],
      notes: placeholderText,
    },
    review: {
      days: 7,
      standard: placeholderText,
    },
  },
  {
    name: "播前基肥",
    types: ["标准农事", "日常营养", "水肥类"],
    trigger: placeholderText,
    prescription: {
      category: "营养类",
      lines: [
        "砂土: 产品名称/用量/亩 使用次数",
        "粘土: 产品名称/用量/亩 使用次数",
        "壤土: 产品名称/用量/亩 使用次数",
      ],
    },
    execute: {
      window: "生育期起始-生育期结束",
      devices: ["农机设备一", "农机设备二", "农机设备三"],
      notes: placeholderText,
    },
    review: {
      days: 7,
      standard: placeholderText,
    },
  },
]);

const headerCellStyle = {
  background: "#F5F5F5",
  color: "#535353",
  fontWeight: 400,
};

const onCopyScheme = () => {
  editDialogVisible.value = true;
};

const onEditMyScheme = () => {
  editDialogVisible.value = true;
};

const onEditConfirm = () => {
  ElMessage.success(activeTab.value === "mine" ? "方案已更新" : "已复制为我的方案");
};
</script>

<style lang="scss" scoped>
$primary: $warning-color;
$primary-light: color.mix(#fff, $warning-color, 90%);
$text: rgba(0, 0, 0, 0.6);
$border: #e7e7e7;

.planting-page {
  box-sizing: border-box;
  min-height: 100%;
  height: 100%;
  padding: 25px;
  display: flex;
  flex-direction: column;

  .page-card {
    flex: 1;
    min-height: 0;
    background: #fff;
    padding: 10px;
    display: flex;
    flex-direction: column;

    .page-header {
      display: flex;
      align-items: center;
      border-bottom: 1px solid $border;

      .page-tabs {
        display: flex;
        gap: 20px;

        &__item {
          position: relative;
          padding: 13px 16px;
          color: $text;
          cursor: pointer;

          &:hover {
            color: $primary;
          }

          &.is-active {
            color: $primary;

            &::after {
              content: "";
              position: absolute;
              left: 0;
              right: 0;
              bottom: -2px;
              height: 2px;
              background: $primary;
              border-radius: 2px 2px 0 0;
            }
          }
        }
      }
    }

    .filter-panel {
      padding: 20px 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;

      .filter-row {
        display: flex;
        gap: 8px;

        .filter-label {
          line-height: 32px;
          color: $text;
        }

        .filter-content {
          &.region-selects {
            display: flex;
            gap: 8px;

            .region-select {
              width: 160px;
            }
          }

          &.tag-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;

            .filter-tag {
              border: 1px solid transparent;
              background: #f3f3f3;
              color: $text;
              padding: 5px 10px;
              border-radius: 3px;
              cursor: pointer;

              &:hover {
                border-color: $primary;
                background: $primary-light;
                color: $primary;
              }

              &.is-active {
                background: $primary-light;
                border-color: $primary;
                color: $primary;
              }
            }
          }
        }
      }
    }

    .table-wrap {
      flex: 1;
      min-height: 0;
      overflow: auto;

      .scheme-table {
        color: #000;

        .type-tags {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 4px;

          .type-tag {
            padding: 1px 6px;
            border-radius: 4px;
            font-size: 12px;
            color: #2199f8;
            background: rgba(33, 153, 248, 0.1);
          }
        }

        .prescription {
          &__title {
            display: inline-block;
            width: fit-content;
            color: #4c4c4c;
            margin-bottom: 2px;
            background: rgba(125, 125, 125, 0.1);
            padding: 0 6px;
            border-radius: 2px;
          }

          &__line {
            font-size: 13px;
          }
        }

        .review-time {
          color: #000;
          font-style: normal;

          &__num {
            color: $primary;
            font-style: normal;
            font-weight: 500;
          }
        }
      }
    }

    .page-footer {
      flex-shrink: 0;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 20px 10px 10px;

      .btn-copy {
        padding: 10px 16px;
      }
    }
  }
}
</style>