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: '产线',
          width:120,
				},
				{
					prop: 'sectionName',
          label: '工段',
          width: 120,
				},
				{
          prop: 'inspectionInfoList',
					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: {
    getDataList() {
      this.dataListLoading = true;
      this.urlOptions.getDataListURL(this.listQuery).then(response => {
        this.tableData = response.data.map((item) => {
          // console.log(item);
          return {
            inspectionInfoList: item.inspectionInfoList.toString(),
            productionLineId:item.productionLineId,
            productionLineName:item.productionLineName,
            sectionId: item.sectionId,
            sectionName: item.sectionName
         }
        })
        this.listQuery.total = response.data.total;
        this.dataListLoading = false;
      });
    },
		reset() {
			this.form = {
				id: null,
				buttonId: null,
				inspectionDetContent: null,
				productionId: null,
				sectionId: null,
				model: null,
				keyValue: null,
			};
			this.resetForm('form');
    },
    deleteHandle(id, name, index, data) {
      this.$confirm(`确认要删除产线名为${data.productionLineName}的数据项?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.urlOptions.deleteURL(id).then(({ data }) => {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList();
              },
            });
          });
        })
        .catch(() => { });
    },
    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.addOrUpdateVisible = true;
          this.$nextTick(() => {
            this.$refs.addOrUpdate.init();
          });
          break;
        case 'export':
          this.handleExport();
          break;
        default:
          console.log(val);
      }
    },
	},
};
</script>