yudao-dev/src/views/home/basicInfoConfiguration/groupKeyTaskConfiguration.vue

<template>
  <div class="app-container">
    <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
    <base-table v-if="tableData.length" class="right-aside" :table-props="tableProps"
      :page="listQuery.pageNo" :limit="listQuery.pageSize" :table-data="tableData">
      <method-btn v-if="tableBtn.length" slot="handleBtn" :width="200" label="操作" :method-list="tableBtn"
        @clickBtn="handleClick" />
    </base-table>
    <pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="total" @pagination="getDataList" :background="true" />
    <!-- 新增 -->
		<base-dialog
			:dialogTitle="addOrEditTitle"
			:dialogVisible="centervisible"
			@cancel="handleCancel"
			@confirm="handleConfirm"
			:before-close="handleCancel"
			width="50%">
			<group-key-add ref="groupKey" @successSubmit="successSubmit" />
		</base-dialog>
  </div>  
</template>

<script>
import GroupKeyAdd from './components/groupKeyAdd.vue';
import { getImportantWorkConfigPage,delImportantWorkConfig } from '@/api/basicInfoConfig';
import { publicFormatter } from '@/utils/dict';
import moment from 'moment';
const tableProps = [
  {
    prop: 'importantWork',
    label: '重点工作'
  },
  {
    prop: 'unit',
    label: '单位',
    filter: publicFormatter('lb_dw')
  },
  {
    prop: 'time',
    label: '所属年份',
    filter: (val) => val ? moment(val).format('YYYY') : '-'
  },
  {
    prop: 'calculateMethod',
    label: '累计值计算方式',
    filter: publicFormatter('important_work_method')
  },
  {
    prop: 'targetProperty',
    label: '数值目标属性',
    filter: publicFormatter('target_property')
  },
];
export default {
  name: 'GroupKeyTaskConfiguration',
  components:{GroupKeyAdd},
  data () {
    return {
      formConfig: [
        {
          type: 'input',
          label: '重点工作',
          placeholder: '重点工作',
          param: 'importantWork'
        },
        {
          type: 'datePicker',
          label: '所属年份',
          dateType: 'year', 
          format: 'yyyy',
          valueFormat: 'yyyy',
          placeholder: '所属年份',
          param: 'time',
          width: 150
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary',
        },
        {
          type: 'separate',
        },
        {
          type: 'button',
          btnName: '新增',
          name: 'add',
          color: 'success',
          plain: true
        }
      ],
      listQuery:{
        importantWork:'',
        time:'',
        pageSize:20,
        pageNo:1
      },
      total:0,
      tableData:[],
      tableProps,
      tableBtn:[
        {
          type: 'edit',
          btnName: '编辑',
        },
        {
          type: 'delete',
          btnName: '删除',
        },
      ],
      addOrEditTitle: '',
      centervisible: false,

    }
  },
  mounted() {
    this.$refs.searchBarForm.formInline.time = moment().endOf('year').endOf('month').endOf('day').format('YYYY-MM-DD HH:mm:ss')
    this.listQuery.time = moment().endOf('year').endOf('month').endOf('day').format('YYYY-MM-DD HH:mm:ss')
    this.getDataList();
  },
  methods: {
    buttonClick(val) {
      switch (val.btnName) {
        case 'search':
          this.listQuery.importantWork = val.importantWork;
          this.listQuery.time = val.time ? moment(val.time).endOf('year').endOf('month').endOf('day').format('YYYY-MM-DD HH:mm:ss') : '';
          this.listQuery.pageNo = 1;
          this.getDataList();
          break;
        case 'add':
          this.addOrEditTitle = '新增';
          this.$nextTick(() => {
            this.$refs.groupKey.init();
          });
          this.centervisible = true;
          break;
      }
    },
    getDataList() {
      getImportantWorkConfigPage({...this.listQuery}).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }else{
          this.tableData = [];
          this.total = 0;
        }
      })
    },
    handleClick(val) {
      switch (val.type) {
				case 'edit':
					this.addOrEditTitle = '编辑';
					this.$nextTick(() => {
						this.$refs.groupKey.init(val.data.id);
					});
					this.centervisible = true;
					break;
				default:
					this.handleDelete(val.data);
			}
    },
    handleCancel() {
			this.$refs.groupKey.formClear();
			this.centervisible = false;
			this.addOrEditTitle = '';
		},
		handleConfirm() {
			this.$refs.groupKey.submitForm();
		},
		successSubmit() {
			this.handleCancel();
			this.getDataList();
		},
		/** 删除按钮操作 */
		handleDelete(row) {
      let _this = this;
      _this.$modal.confirm('确定删除重点工作"' + row.importantWork + '吗？').then(function() {
        delImportantWorkConfig({id:row.id}).then(response => {
          _this.$modal.msgSuccess("删除成功");
          _this.getDataList();
          
        })
      }).catch(() => {});
		}
  }
}
</script>
<style lang="scss" scoped>
  .app-container {
    padding: 16px;
  }
</style>