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

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

    <!-- 列表 -->
    <base-table :max-height="tableH" :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> -->
    <ProcessBomList ref="addOrUpdate" style="margin-top: 16px" @getList="getDataList" />

  </div>
</template>

<script>
import {
	deleteQualityInspectionBoxBtn,
  getPage,
  exportQualityInspectionBoxBtnExcel,
  getUserList
} from '@/api/base/qualityInspectionBoxPermissions';
import basicPage from './basic-page';
import moment from 'moment';
import addOrUpdate from './dialogForm.vue';
import ProcessBomList from './ProcessBomList.vue';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
import row from './row.vue';
export default {
	name: 'QualityInspectionBoxBtn',
  mixins: [basicPage, tableHeightMixin],
  components: { addOrUpdate, ProcessBomList },
	data() {
    return {
      urlOptions: {
        getDataListURL: getPage,
        deleteURL: deleteQualityInspectionBoxBtn,
        // exportURL: exportFactoryExcel,
      },
			searchBarFormConfig: [
        {
          type: 'select',
          label: '用户名称',
          selectOptions: [],
          labelField: 'name',
          valueField: 'name',
          param: 'userName',
        },
        {
          type: 'select',
          label: '用户昵称',
          selectOptions: [],
          labelField: 'name',
          valueField: 'name',
          param: 'nickName',
        },
				{
          type: this.$auth.hasPermi('base:quality-inspection-box-permissions:query')
            ? 'button'
            : '',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
				{
					type: 'separate',
				},
				{
          type: this.$auth.hasPermi('base:quality-inspection-box-permissions:create')
						? 'button'
						: '',
					btnName: '新增',
					name: 'add',
					plain: true,
					color: 'success',
				},
			],
			tableBtn: [
        this.$auth.hasPermi('base:quality-inspection-box-permissions:update')
					? {
							type: 'edit',
							btnName: '修改',
					  }
					: undefined,
        this.$auth.hasPermi('base:quality-inspection-box-permissions: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: 'userName',
					label: '用户名',
				},
				{
          prop: 'nickName',
					label: '用户昵称',
				},
				{
          prop: 'datas',
          label: '产线及工段',
          subcomponent: row
				}
			],
			// 查询参数
			listQuery: {
				pageNo: 1,
				pageSize: 20,
        userName: null,
        nickName: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.getDict()
	},
  methods: {
    getDict() {
      getUserList({
        pageNo: 1,
        pageSize:999
      }).then((res) => {
        this.searchBarFormConfig[0].selectOptions = res.data.map((item) => {
          return {
            id: item.username,
            name:item.username
          }
        })
        this.searchBarFormConfig[1].selectOptions = res.data.map((item) => {
          return {
            id: item.nickname,
            name: item.nickname
          }
        })
      })
    },
    getDataList() {
      this.dataListLoading = true;
      this.urlOptions.getDataListURL(this.listQuery).then(res => {
        this.tableData = res.data.list.map((item) => {
          return {
            datas: item.strList || null,
            nickName: item.nickName,
            userName: item.userName,
            userId: item.userId
            // sectionId: item.sectionId,
            // sectionName: item.sectionName
         }
        })
        console.log(this.tableData);
        this.listQuery.total = res.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) {
      console.log(data)
      // console.log(data)
      this.$confirm(`确认要删除产线名为${data.userName}的数据项?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.urlOptions.deleteURL(data.userId).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.userName = val.userName ? val.userName : undefined;
          this.listQuery.nickName = val.nickName ? val.nickName : 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.handleAddEquipment();
          });
          break;
        case 'export':
          this.handleExport();
          break;
        default:
          console.log(val);
      }
    },
	},
};
</script>