yudao-dev/src/views/equipment/base/inspection/items/index.vue

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

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

    <!-- 分页组件 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 对话框(添加 / 修改) -->
    <base-dialog :dialogTitle="title" :dialogVisible="open" @close="cancel" @cancel="cancel" width="20%"
      @confirm="submitForm">
      <DialogForm v-if="open" ref="form" v-model="form" :has-files="false" :rows="rows" />
    </base-dialog>
    <show-detail v-if="showDetailVisible" ref="showDetail"></show-detail>
  </div>
</template>

<script>
import moment from 'moment';
import basicPageMixin from '@/mixins/lb/basicPageMixin';
import { deleteProgramTypeData } from '@/api/equipment/base/maintain/items'
import showDetail  from './showDetail.vue'

export default {
  name: 'PlanConfig',
  mixins: [basicPageMixin],
  components: {
    showDetail
  },
	data() {
		const t = new Date();
		const [y, m, d] = [t.getFullYear(), t.getMonth(), t.getDate()];
		return {
      searchBarKeys: ['equipmentName', 'createTime'],
      equipmentTypeList:[],
			tableBtn: [
				{
					type: 'detail',
					btnName: '详情',
				},
				// this.$auth.hasPermi('equipment:plan-config:update')
				// 	? {
				// 			type: 'edit',
				// 			btnName: '修改',
				// 	  }
				// 	: undefined,
				this.$auth.hasPermi('equipment:plan-config:delete')
					? {
							type: 'delete',
							btnName: '删除',
					  }
					: undefined,
			].filter((v) => v),
      tableProps: [
        { prop: 'equipmentType', label: '设备类型' },
        { prop: 'creator', label: '创建人' },
				{
          prop: 'createTime',
					label: '创建时间',
					// fixed: true,
					width: 180,
					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
				},
			],
			searchBarFormConfig: [
				{
					type: 'select',
					label: '设备类型',
					placeholder: '请输入设备类型',
          param: 'equipmentTypeId',
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
				{
					type: 'separate',
				},
				{
					type: this.$auth.hasPermi('equipment:plan-config:create')
						? 'button'
						: '',
					btnName: '新增',
					name: 'add',
					plain: true,
					color: 'success',
				},
			],
			rows: [
				[
					{
						select: true,
						label: '设备类型',
            prop: 'equipmentTypeId',
            url: '/base/core-equipment-type/listAll',
            rules: [{ required: true, message: '设备类型不能为空', trigger: 'blur' }],
					},
				],
			],
			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				pageNo: 1,
				pageSize: 10,
        equipmentTypeId: null,
      },
      showDetailVisible:false,
			// 表单参数
			form: {},
      basePath: 'base/equipment-check-program-type',
		};
	},
  created() {
    this.initSearchBar()
		this.getList();
	},
	methods: {
		/** 查询列表 */
		getList() {
			this.loading = true;
			// 执行查询
			this.recv(this.queryParams).then((response) => {
				this.list = response.data.list;
				this.total = response.data.total;
				this.loading = false;
			});
		},
		/** 取消按钮 */
		cancel() {
			this.open = false;
			this.reset();
		},
		/** 表单重置 */
		reset() {
			this.form = {
        equipmentTypeId: null,
        id: null,
        equipmentType:null,
			};
			this.resetForm('form');
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNo = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm('queryForm');
			this.handleQuery();
    },
    initSearchBar() {
      this.http('/base/core-equipment-type/listAll', 'get').then(({ data }) => {
        this.$set(
          this.searchBarFormConfig[0],
          'selectOptions',
          data.map((item) => ({
            name: item.name,
            id: item.id,
          }))
        );
        this.equipmentTypeList = data
      });
    },
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = '巡检项目设置新增';
		},
    handleDetail(row) {
      this.showDetailVisible = true
      this.$nextTick(() => {
        this.$refs.showDetail.init(row.equipmentTypeId)
      })
				// alert('跳转到 保养记录')
				// console.log(row)
				// const queryData = {
				// 	equipmentId: row.equipmentId,
				// 	maintainPlanId: row.id,
				// 	isAdd: 1
				// 	// relatePlan: row.enabled
				// }
				// if (this.queryParams.createTime) {
				// 	queryData.createTime = this.queryParams.createTime
				// }
				// console.log('你好', queryData)
				// this.$router.push({ path: '/equipment/base/maintain/record',query: queryData })
				// this.$router.push({ path: '/equipment/base/maintain/record', query: { orderNo: row.orderNo }})
		},
		/** 修改按钮操作 */
    handleUpdate(row) {
			this.reset();
			const id = row.id;
			this.info({ id }).then((response) => {
				this.form = response.data;
				this.open = true;
				this.title = '修改巡检项目';
			});
		},
		/** 提交按钮 */
    submitForm() {
      this.equipmentTypeList.forEach(ele => {
        if (this.form.equipmentTypeId === ele.id) {
          this.form.equipmentType = ele.name
        }
      });
			this.$refs['form'].validate((valid) => {
				if (!valid) {
					return;
				}
				// 修改的提交
				if (this.form.id != null) {
					this.put(this.form).then((response) => {
						this.$modal.msgSuccess('修改成功');
						this.open = false;
						this.getList();
					});
					return;
				}
        // 添加的提交
				this.post(this.form).then((response) => {
					this.$modal.msgSuccess('新增成功');
					this.open = false;
          this.getList()
          this.showDetailVisible = true
          this.$nextTick(() => {
            this.$refs.showDetail.init(this.form.equipmentTypeId)
          })
				});
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const id = row.id;
      this.$modal.delConfirm('是否确认删除' + row.equipmentType + '?')
				.then(function () {
          return deleteProgramTypeData(id);
				})
				.then(() => {
					this.getList();
					this.$modal.msgSuccess('删除成功');
				})
				.catch(() => {});
		},
	},
};
</script>