Index.vue

<template>
  <div>
    <a-form layout="inline" class="search_form">
      <a-button type="primary" class="search_input" style="margin-right: 10px;" v-if="isButten" @click="createYear">添加</a-button>
      <span :style="{color:'#DC143C'}">{{description}}</span>
    </a-form>
    <a-table :dataSource="tableData" :columns="columns" rowKey="id" :pagination="false" :loading="loading">
      <template slot="option" slot-scope="record">
        <a-button type="primary" size="small" @click="editYear(record)">修改</a-button>&nbsp;
        <a-button type="danger" size="small" @click="deleteYear(record)">删除</a-button>
      </template>
    </a-table>
    <a-pagination v-if="pagination.total > 0" :total="pagination.total" show-size-changer show-quick-jumper v-model="pagination.pageIndex" :page-size="pagination.pageSize" :page-size-options="pagination.pageSizeOptions" @showSizeChange="showSizeChange" @change="change" :showTotal="() => `共 ${pagination.total} 条`" />
    <a-modal :visible="visibleEdit" :title="'添加/修改'" @cancel="close" @ok="submit" :maskClosable="false" :width="800" destroyOnClose>
      <a-form-model ref="formRef" :model="formData" :rules="formRules" :label-col="{span: 6}" :wrapper-col="{span: 17}">
        <a-form-model-item label="申报年度" prop="reportYear">
          <a-input v-model="formData.reportYear" placeholder="申报年度" :disabled="disabled" style="width: 120px"></a-input>
        </a-form-model-item>
        <a-form-model-item label="申报时间" prop="startTime">
          <a-form-model-item prop="startTime" style="flex-basis:30%;">
            <a-date-picker format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss" v-model="formData.startTime" style="width: 180px" @change="dateChange" />
            <span>~</span>
            <a-date-picker format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss" v-model="formData.endTime" style="width: 180px" @change="dateChange" />
          </a-form-model-item>
        </a-form-model-item>
        <a-form-model-item label="中期考核年度" prop="checkYear" v-if="display">
          <a-input v-model="formData.checkYear" placeholder="中期考核年度"></a-input>
        </a-form-model-item>
        <a-form-model-item label="备注" prop="remark">
          <a-textarea placeholder="" v-model="formData.remark" :rows="3" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { isEmptyParams } from "@/views/utils/common";
import moment from 'moment';

export default {
  name: 'projectTimeSet',
  data () {
    return {
      formData: {
        id: undefined,
        reportYear: moment().format('YYYY'),
        unitCode: '',
        yearType: 1, //1项目 2任务书 3中期考核
        startTime: '',
        endTime: '',
        remark: '',
        checkYear: '',
        created: '',
        updated: ''
      },
      tableData: [],
      columns: [],
      pagination: {
        pageIndex: 1,
        pageSize: this.$defaultPageSize,
        total: 0,
        pageSizeOptions: this.$defaultPageSizeOptions,
      },
      // 弹窗标志
      visibleEdit: false,
      loading: false,
      isButten: false,
      disabled: true,
      display: false,
      description: '',
      formRules: {
        id: [{ required: false }],
        reportYear: [{ required: true, message: '请输入申报年度' }],
        unitCode: [{ required: true, message: '请输入单位编码' }],
        yearType: [{ required: true, message: '请选择年度类型' }],
        startTime: { required: true, message: '请选择开始时间' },
        endTime: { required: true, message: '请选择结束时间' },
        remark: [{ required: false }],
        checkYear: [{ required: true, message: '请填写中期审核年度' }],
        created: [{ required: false }],
        updated: [{ required: false }]
      }
    }
  },
  created () {
    this.InitApplyData()
  },
  computed: {

  },
  methods: {
    moment,
    InitApplyData () {
      this.columns = [
        { title: '年度', dataIndex: 'reportYear' },
        { title: '开始时间', dataIndex: 'startTime' },
        { title: '结束时间', dataIndex: 'endTime' },
        { title: '备注', dataIndex: 'remark' },
      ]
      this.getYearInfo()
    },
    getYearInfo () {
      let len = this.$defaultLength
      let pars = { type: 3 }
      this.$api.year.getYearInfo(pars).then(({ data = {} }) => {
        if (data) {
          this.getListByPage()
          this.isButten = data.disabled
          this.description = data.description
        }
      }).catch(() => {
      })
    },
    getListByPage () {
      this.loading = true
      let pars = { yearType: 3 }
      let par = {
        ...pars,
        pageIndex: this.pagination.pageIndex,
        pageSize: this.pagination.pageSize
      }
      this.$api.batch.getListByPage(par).then(({ data = {} }) => {
        if (data) {
          const { dataList = [], total = 0 } = data
          this.tableData = dataList
          this.pagination.total = total
          this.loading = false
        }
      }).catch(() => {
        this.loading = false
      })
    },
    searchList () {
      this.pagination.pageIndex = 1
      this.getListByPage()
    },
    change () {
      this.getListByPage()
    },
    showSizeChange (current, pageSize) {
      this.pagination.pageIndex = current
      this.pagination.pageSize = pageSize
      this.getListByPage()
    },
    // 起止日期选择处理
    dateChange (value) {
      let statr = this.formData.startTime
      let end = this.formData.endTime
      if (!statr || !end) {
        return
      }
      if (statr > end) {
        this.formData.startTime = end
        this.formData.endTime = statr
      }
    },
    createYear () {
      let pars = { type: 3 }
      this.$api.year.getYearInfo(pars).then(({ data = {} }) => {
        if (data) {
          this.formData.reportYear = data.reportYear
          this.formData.unitCode = data.unitCode
          this.formData.yearType = data.yearType
          this.formData.startTime = data.startTime
          this.formData.endTime = data.endTime
          this.formData.checkYear = ''
          this.formData.remark = ''
        }
      }).catch(() => {
      })
      this.visibleEdit = true
    },
    editYear (record) {
      Object.assign(this.formData, record);
      this.visibleEdit = true
    },
    close () {
      this.visibleEdit = false
    },
    submit () {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          let pars = isEmptyParams(this.formData)
          let par = {
            ...pars
          }
          this.$api.batch.addOrUpdateYearInfo(par).then(({ data = {} }) => {
            if (data) {
              this.$message.success('成功！')
              this.visibleEdit = false
              this.getYearInfo()
              this.getListByPage()
            }
          })
        }
      })
    },
    deleteYear (record) {
      this.$confirm({
        title: '删除',
        content: '确定要删除该申报年度？',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          let pars = isEmptyParams(record)
          let par = {
            ...pars
          }
          this.$api.batch.deleteApplyYearInfo(par).then(({ data = {} }) => {
            if (data) {
              this.getYearInfo()
              this.getListByPage()
              this.$message.success('删除成功！')
            }
          })
        },
        onCancel () {

        },
      })
    }
  },
  watch: {
    $route () {
      this.InitApplyData()
    }
  }
}
</script>