种植规划和土地巡查
This commit is contained in:
lzc
parent
e80a2ddcbd
commit
bf58a12b3f
@ -23,5 +23,5 @@ const size = computed(() => SettingStore.themeConfig.globalComSize);
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './styles/style.scss';
|
||||
@import './styles/style';
|
||||
</style>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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();
|
||||
align-items: center;
|
||||
@include flex-row;
|
||||
|
||||
justify-content: space-between;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -35,14 +35,14 @@ const isReload = computed(() => SettingStore.isReload);
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include scrollable();
|
||||
box-sizing: border-box;
|
||||
@include scrollable;
|
||||
|
||||
box-sizing: border-box;
|
||||
&-inner {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
background-color: #f5f5f5;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
background-color: #ffffff;
|
||||
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%;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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();
|
||||
width: 4px;
|
||||
background: $color-primary;
|
||||
height: 1.15em;
|
||||
vertical-align: -0.25em;
|
||||
@include icon-space;
|
||||
|
||||
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;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset: 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;
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
@import 'common/base.scss';
|
||||
@import 'common/define.scss';
|
||||
@import 'common/base';
|
||||
@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;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
@mixin scrollable() {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overflow: hidden auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
@ -12,11 +12,9 @@
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: $foreground-color;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: $background-color;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -155,8 +155,8 @@ function handleResetSearch() {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.lands_types {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
> label {
|
||||
width: 12%;
|
||||
::v-deep() {
|
||||
|
||||
@ -1,9 +1,144 @@
|
||||
<template>
|
||||
<CustCard>
|
||||
<el-row>
|
||||
<el-col></el-col>
|
||||
</el-row>
|
||||
<el-form ref="searchRef" :model="searchCondition">
|
||||
<el-row :gutter="20">
|
||||
<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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user