ll

liukangdong

2025-01-20 8f03d1529c77bd91c0764e7b25e7a356a614b435

 admin/src/views/Inspection/components/OperaYwPatrolLineWindow.vue

@@ -1,78 +1,255 @@
<template>
  <GlobalWindow
    :title="title"
    :visible.sync="visible"
    :confirm-working="isWorking"
    @confirm="confirm"
  >
  <GlobalWindow width="800px" :title="title" :visible.sync="visible" :confirm-working="isWorking" @confirm="confirm">
    <el-form :model="form" ref="form" :rules="rules">
      <el-form-item label="创建人编码" prop="creator">
        <el-input v-model="form.creator" placeholder="请输入创建人编码" v-trim/>
      <el-form-item label="线路名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入线路名称" v-trim />
      </el-form-item>
      <el-form-item label="创建时间" prop="createDate">
        <el-date-picker v-model="form.createDate" value-format="yyyy-MM-dd" placeholder="请输入创建时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="更新人编码" prop="editor">
        <el-input v-model="form.editor" placeholder="请输入更新人编码" v-trim/>
      </el-form-item>
      <el-form-item label="更新时间" prop="editDate">
        <el-date-picker v-model="form.editDate" value-format="yyyy-MM-dd" placeholder="请输入更新时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="是否删除0否 1是" prop="isdeleted">
        <el-input v-model="form.isdeleted" placeholder="请输入是否删除0否 1是" v-trim/>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入名称" v-trim/>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注" v-trim/>
      </el-form-item>
      <el-form-item label="状态 0启用 1禁用" prop="status">
        <el-input v-model="form.status" placeholder="请输入状态 0启用 1禁用" v-trim/>
      </el-form-item>
      <el-form-item label="排序码" prop="sortnum">
        <el-input v-model="form.sortnum" placeholder="请输入排序码" v-trim/>
      </el-form-item>
      <el-form-item label="图标" prop="imgurl">
        <el-input v-model="form.imgurl" placeholder="请输入图标" v-trim/>
      </el-form-item>
      <div class="head">
        <div class="title">巡检点</div>
        <el-button type="primary" @click="openModal">添加巡检点</el-button>
      </div>
      <el-table :data="list" stripe>
        <el-table-column prop="code" label="巡检点编码" min-width="100px"></el-table-column>
        <el-table-column prop="pointName" label="巡检点名称" min-width="100px"></el-table-column>
        <el-table-column prop="name" label="扫码打卡" min-width="100px">
          <template v-slot="scope">
            <el-switch v-model="scope.row.needScancode" :disabled="true" @change="changeStatus" :active-value="0"
              :inactive-value="1"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="排序码" min-width="100px">
          <template v-slot="scope">
            <el-input v-model="scope.row.sortnum" class="w100"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="操作" min-width="100px">
          <template v-slot="scope">
            <span class="red cu" @click="handleDel(scope)">删除</span>
          </template>
        </el-table-column>
      </el-table>


    </el-form>
    <!--  -->
    <el-dialog title="添加巡检点" :close-on-click-modal="false" append-to-body :visible.sync="isShowModal" width="880px">
      <!-- <el-select class="w400" v-model="selPoint" clearable multiple filterable>
        <el-option v-for="item in pointList" :value="item.id" :label="item.name"></el-option>
      </el-select> -->
      <el-form ref="searchForm" :model="searchForm" label-width="80px" inline>
        <el-form-item label="巡检点" prop="name">
          <el-input v-model="searchForm.name" placeholder="请输入巡检点名称/编码" @keypress.enter.native="search"></el-input>
        </el-form-item>
        <el-form-item label="巡检区域">
          <el-cascader v-model="searchForm.areaIds" @change="changeSel" placeholder="请选择巡检区域" clearable
            :options="areaList" :props="{
              label: 'name',
              value: 'id',
              children: 'childCategoryList'
            }"></el-cascader>
        </el-form-item>
        <el-button type="primary" @click="initData">搜索</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="editClick()" icon="el-icon-plus"
                   v-permissions="['business:ywpatrolpoint:create']">新建巡检点</el-button>
      </el-form>

      <el-table @selection-change="handleSelectionChange" v-loading="isWorking.search" :data="pointList" stripe>
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="code" label="巡检点编码" min-width="100px"></el-table-column>
        <el-table-column prop="name" label="巡检点名称" min-width="100px"></el-table-column>
        <el-table-column prop="deviceName" label="关联设备" min-width="100px"></el-table-column>
        <el-table-column prop="areaName" label="巡检区域" min-width="100px"></el-table-column>
      </el-table>
      <pagination class="mt10" @size-change="handleSizeChange" @current-change="handlePageChange" :pagination="pagination">
      </pagination>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowModal = false">取 消</el-button>
        <el-button type="primary" @click="subModal">确 定</el-button>
      </span>
    </el-dialog>
    <OperaYwPatrolPointWindow ref="operaYwPatrolPointWindow" @success="handlePageChange" />
  </GlobalWindow>
</template>

<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
import OperaYwPatrolPointWindow from '@/views/Inspection/components/OperaYwPatrolPointWindow'
import Pagination from '@/components/common/Pagination'
import { fetchList as getFetchList } from '@/api/Inspection/ywPatrolPoint'
import { create, updateById, detailById } from '@/api/Inspection/ywPatrolLine'
import { Message } from 'element-ui'
import { fetchList } from '@/api/business/category'
export default {
  name: 'OperaYwPatrolLineWindow',
  extends: BaseOpera,
  components: { GlobalWindow },
  data () {
  components: { GlobalWindow, Pagination,OperaYwPatrolPointWindow },
  data() {
    return {
      // 表单数据
      form: {
        id: null,
        creator: '',
        createDate: '',
        editor: '',
        editDate: '',
        isdeleted: '',
        name: '',
        remark: '',
        status: '',
        sortnum: '',
        imgurl: ''
      },
      selPoint: [],

      pointList: [],
      selList: [],
      areaList: [],
      searchForm: {
        name: '',
        areaId: '',
        areaIds: []
      },
      pagination: {
        pageSize: 10,
        page: 1,
        total: 0
      },

      list: [],
      isWorking: false,
      isShowModal: false,
      // 验证规则
      rules: {
      }
        name: [{ required: true, message: '请输入' }],
        selPoint: [{ type: 'array', required: true, message: '请输入' }],
      },
    }
  },
  created () {
  created() {
    this.config({
      api: '/Inspection/ywPatrolLine',
      'field.id': 'id'
    })
  },
  methods: {
    editClick(row) {
        this.$refs.operaYwPatrolPointWindow.open('新建巡检点')
      // this.$refs.operaYwPatrolPointWindow.initData()
    },
    confirm() {
      const { form, list } = this
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (list.length == 0) return Message.warning('请先选择巡检点')
          form.linePointList = list
          this.isWorking = true
          let fn = form.id ? updateById : create
          fn({ ...form }).then(res => {
            Message.success('保存成功')
            this.isWorking = false
            this.close()
          }, () => {
            this.isWorking = false
          })
        }
      })

    },
    getDetail(row) {
      detailById(row.id).then(res => {
        this.form = res
        this.list = res.linePointList || []
      })
    },
    getProject() {
      fetchList({
        model: { type: 4 },
        capacity: 1000,
        page: 1,
      }).then(res => {
        this.areaList = res.records || []
      })
    },
    initData() {
      const { searchForm, pagination } = this
      getFetchList({
        page: pagination.page,
        capacity: pagination.pageSize,
        model: { ...searchForm }
      }).then(res => {
        this.pointList = res.records || []
        this.pagination.total = res.total
      })
    },
    handleSelectionChange(val) {
      this.selList = val
    },
    reset() {
      this.searchForm = {
        name: '',
        areaId: '',
        areaIds: []
      }
      this.initData()
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.initData()
    },
    handlePageChange(val) {
      this.pagination.page = val
      this.initData()
    },
    handleDel(row) {
      this.list.splice(row.$index, 1)

    },
    changeStatus(row) {

    },
    openModal() {
      this.getProject()
      this.reset()
      this.isShowModal = true
    },
    changeSel(e) {
      if (e && e.length == 1) {
      } else if (e && e.length == 2) {
        this.$set(this.searchForm, 'areaId', e[1])
      } else {
      }
      this.initData()
    },
    subModal() {
      // this.list = this.selList.map(item => {
      //   return {
      //     needScancode: 0,
      //     pointName: item.name,
      //     pointId: item.id,
      //     code: item.code
      //   }
      // })
      this.selList.forEach(item => {
        const index = this.list.findIndex(i => i.code === item.code)
        if (index === -1) {
          this.list.push({
            needScancode: 0,
            pointName: item.name,
            pointId: item.id,
            code: item.code
          })
        }
      })
      this.isShowModal = false
    },
    close() {
      this.visible = false
      this.$emit('success')
    }
  }
}
</script>
<style lang="scss" scoped>
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;

  div {
    font-weight: 500;
  }
}
</style>