yudao-dev/src/views/quality/base/basicData/qualityInspectionBoxBtn/index.vue

<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" @headBtnClick="buttonClick" />

    <!-- 列表 -->
    <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" :table-data="tableData">
      <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right" :method-list="tableBtn"
        @clickBtn="handleClick" />
    </base-table>

    <!-- 分页组件 -->
    <pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total"
      @pagination="getDataList" />

    <!-- 对话框(添加 / 修改) -->
    <base-dialog :dialogTitle="addOrEditTitle" :dialogVisible="addOrUpdateVisible" width="50%" @cancel="handleCancel"
      @confirm="handleConfirm" :before-close="handleCancel">
      <add-or-update ref="addOrUpdate" @refreshDataList="successSubmit"></add-or-update>
    </base-dialog>
  </div>
</template>

<script>
import {
	createQualityInspectionBoxBtn,
	updateQualityInspectionBoxBtn,
	deleteQualityInspectionBoxBtn,
	getQualityInspectionBoxBtn,
	getQualityInspectionBoxBtnPage,
	exportQualityInspectionBoxBtnExcel,
} from '@/api/base/qualityInspectionBoxBtn';
import basicPage from '../../mixins/basic-page';
import moment from 'moment';
import addOrUpdate from './dialogForm.vue';

export default {
	name: 'QualityInspectionBoxBtn',
  mixins: [basicPage],
  components: { addOrUpdate },
	data() {
    return {
      urlOptions: {
        getDataListURL: getQualityInspectionBoxBtnPage,
        deleteURL: deleteQualityInspectionBoxBtn,
        // exportURL: exportFactoryExcel,
      },
			searchBarFormConfig: [
				{
					type: 'input',
					label: '检查内容',
					placeholder: '请输入检查内容',
					param: 'inspectionDetContent',
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
				{
					type: 'separate',
				},
				{
					type: this.$auth.hasPermi('base:quality-inspection-box-btn:create')
						? 'button'
						: '',
					btnName: '新增',
					name: 'add',
					plain: true,
					color: 'success',
				},
			],
			tableBtn: [
				this.$auth.hasPermi('base:quality-inspection-box-btn:update')
					? {
							type: 'edit',
							btnName: '修改',
					  }
					: undefined,
				this.$auth.hasPermi('base:quality-inspection-box-btn:delete')
					? {
							type: 'delete',
							btnName: '删除',
					  }
					: undefined,
      ].filter((v) => v),
      tableData: [],

			tableProps: [
				// {
				// 	prop: 'createTime',
				// 	label: '添加时间',
				// 	fixed: true,
				// 	width: 180,
				// 	filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
				// },
				{
          prop: 'productionLineName',
					label: '产线',
				},
				{
					prop: 'sectionName',
					label: '工段',
				},
				{
					prop: 'inspectionDetContent',
					label: '检测内容',
				}
			],
			// 查询参数
			listQuery: {
				pageNo: 1,
				pageSize: 10,
				inspectionDetContent: null,
      },
      addOrUpdateVisible: false,
      addOrEditTitle:'',
			// 搜索框需要的 keys, 与上面 listQuery 的除 pageNo, pageSize 之外的 key 一一对应
			searchBarKeys: ['inspectionDetContent'],
			form: {
				id: null,
				buttonId: null,
        inspectionDetContent: [],
        productionLineId: null,
				sectionId: null,
				model: null,
				keyValue: null,
			},
		};
	},
	created() {
		// this.getList();
	},
	methods: {
		/** 查询列表 */
		// getList() {
		// 	this.loading = true;
		// 	// 执行查询
		// 	getQualityInspectionBoxBtnPage(this.listQuery).then((response) => {
		// 		this.list = response.data.list;
		// 		this.total = response.data.total;
		// 		this.loading = false;
		// 	});
		// },
		/** 表单重置 */
		reset() {
			this.form = {
				id: null,
				buttonId: null,
				inspectionDetContent: null,
				productionId: null,
				sectionId: null,
				model: null,
				keyValue: null,
			};
			this.resetForm('form');
    },
    buttonClick(val) {
      switch (val.btnName) {
        case 'search':
          this.listQuery.pageNo = 1;
          this.listQuery.pageSize = 10;
          this.listQuery.inspectionDetContent = val.inspectionDetContent ? val.inspectionDetContent : undefined;
          // this.listQuery.teamId = val.teamId ? val.teamId : undefined;
          this.getDataList()
          break;
        case 'add':
          this.addOrEditTitle = '新增';
          this.addOrUpdateVisible = true;
          this.addOrUpdateHandle();
          break;
        case 'export':
          this.handleExport();
          break;
        default:
          console.log(val);
      }
    },
	},
};
</script>