|
|
@@ -0,0 +1,131 @@
|
|
|
+<template>
|
|
|
+ <div class="pending">
|
|
|
+ <el-form :inline="true" size="small">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <template v-for="item in formItems">
|
|
|
+ <el-col :span="item.col" :key="item.id">
|
|
|
+ <el-form-item :label="item.label">
|
|
|
+ <template v-if="item.type === 'input'">
|
|
|
+ <el-input
|
|
|
+ style="width: 180px;"
|
|
|
+ :placeholder="item.placeholder"
|
|
|
+ v-model="formData[`${item.field}`]"
|
|
|
+ clearable>
|
|
|
+ </el-input>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.type === 'select'">
|
|
|
+ <el-select
|
|
|
+ style="width: 180px;"
|
|
|
+ :placeholder="item.placeholder"
|
|
|
+ v-model="formData[`${item.field}`]"
|
|
|
+ clearable>
|
|
|
+ <el-option
|
|
|
+ v-for="option in item.options"
|
|
|
+ :key="option.value"
|
|
|
+ :value="option.value"
|
|
|
+ :label="option.label">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.type === 'datepicker'">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="formData[`${item.field}`]"
|
|
|
+ :start-placeholder="item.placeholder[0]"
|
|
|
+ :end-placeholder="item.placeholder[1]"
|
|
|
+ type="daterange"
|
|
|
+ clearable
|
|
|
+ class="date-picker-reset">
|
|
|
+ </el-date-picker>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.type === 'text'">
|
|
|
+ <span :style="{cursor: 'pointer', color: item.value === day ? color : '#000' }" @click="onSelectText(item.value)">{{item.text}}</span>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.type === 'button'">
|
|
|
+ <el-button @click="manage(item.click)">{{item.text}}</el-button>
|
|
|
+ </template>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </template>
|
|
|
+<!-- <el-col :span="4">-->
|
|
|
+<!-- <el-form-item label="栋舍">-->
|
|
|
+<!-- <el-select style="width: 180px;"></el-select>-->
|
|
|
+<!-- </el-form-item>-->
|
|
|
+<!-- </el-col>-->
|
|
|
+<!-- <el-col :span="4">-->
|
|
|
+<!-- <el-form-item label="单元">-->
|
|
|
+<!-- <el-select style="width: 180px;"></el-select>-->
|
|
|
+<!-- </el-form-item>-->
|
|
|
+<!-- </el-col>-->
|
|
|
+<!-- <el-col :span="1">-->
|
|
|
+<!-- <p style="line-height: 30px;">今日</p>-->
|
|
|
+<!-- </el-col>-->
|
|
|
+<!-- <el-col :span="1">-->
|
|
|
+<!-- <p style="line-height: 30px;">本周</p>-->
|
|
|
+<!-- </el-col>-->
|
|
|
+<!-- <el-col :span="1">-->
|
|
|
+<!-- <p style="line-height: 30px;">本月</p>-->
|
|
|
+<!-- </el-col>-->
|
|
|
+<!-- <el-col :span="6">-->
|
|
|
+<!-- <el-form-item>-->
|
|
|
+<!-- <el-date-picker-->
|
|
|
+<!-- v-model="dateRange"-->
|
|
|
+<!-- type="daterange"-->
|
|
|
+<!-- range-separator="至"-->
|
|
|
+<!-- start-placeholder="开始日期"-->
|
|
|
+<!-- end-placeholder="结束日期">-->
|
|
|
+<!-- </el-date-picker>-->
|
|
|
+<!-- </el-form-item>-->
|
|
|
+<!-- </el-col>-->
|
|
|
+<!-- <el-col :span="2">-->
|
|
|
+<!-- <el-form-item>-->
|
|
|
+<!-- <el-button>导出数据</el-button>-->
|
|
|
+<!-- </el-form-item>-->
|
|
|
+<!-- </el-col>-->
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapState } from 'vuex';
|
|
|
+export default {
|
|
|
+ name: "XForm",
|
|
|
+ props: {
|
|
|
+ formItems: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+ day: {
|
|
|
+ type: Number,
|
|
|
+ default: () => 2
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['color'])
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ formData: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 拿到方法
|
|
|
+ onSelectText(value) {
|
|
|
+ this.$emit('setDay', value)
|
|
|
+ },
|
|
|
+ manage(value) {
|
|
|
+ this.$emit('onClickType', value)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.pending {
|
|
|
+ width: 100%;
|
|
|
+ height: 70px;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+</style>
|
