jiangping
2024-11-23 8ac30411bb33e406e0ed5a2b6e2edaf7ab59f11f
admin/src/views/Inspection/components/OperaYwPatrolLineWindow.vue
@@ -1,78 +1,157 @@
<template>
  <GlobalWindow
    :title="title"
    :visible.sync="visible"
    :confirm-working="isWorking"
    @confirm="confirm"
  >
  <GlobalWindow :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 v-loading="isWorking.search" :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" @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="500px">
      <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>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowModal = false">取 消</el-button>
        <el-button type="primary" @click="subModal">确 定</el-button>
      </span>
    </el-dialog>
  </GlobalWindow>
</template>
<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
import { getFetchList } from '@/api/Inspection/ywPatrolPoint'
import { create } from '@/api/Inspection/ywPatrolLine'
import { Message } from 'element-ui'
export default {
  name: 'OperaYwPatrolLineWindow',
  extends: BaseOpera,
  components: { GlobalWindow },
  data () {
  data() {
    return {
      // 表单数据
      form: {
        id: null,
        creator: '',
        createDate: '',
        editor: '',
        editDate: '',
        isdeleted: '',
        name: '',
        remark: '',
        status: '',
        sortnum: '',
        imgurl: ''
      },
      selPoint: [],
      pointList: [],
      list: [],
      isShowModal: false,
      // 验证规则
      rules: {
        name: [{ required: true, message: '请输入' }],
        selPoint: [{ type: 'array', required: true, message: '请输入' }],
      }
    }
  },
  created () {
  created() {
    this.config({
      api: '/Inspection/ywPatrolLine',
      'field.id': 'id'
    })
  },
  methods: {
    confirm() {
      const { form, list } = this
      if (list.length == 0) return Message.warning('请先选择巡检点')
      form.linePointList = list
      create({ ...form }).then(res => {
        if (res.code == 200) {
          Message.success('保存成功')
          this.close()
        }
      })
    },
    initData() {
      getFetchList({}).then(res => {
        this.pointList = res || []
      })
    },
    handleDel(row) {
      this.list.splice(row.$index, 1)
    },
    changeStatus(row) {
    },
    openModal() {
      this.selPoint = this.list.map(i => i.id)
      this.isShowModal = true
    },
    subModal() {
      const { selPoint, pointList, list } = this
      if (selPoint.length == 0) return Message.warning('请先选择巡检点')
      let arr = []
      // 取出选中列表
      pointList.forEach(item => {
        selPoint.forEach(item2 => {
          if (item.id === item2) {
            arr.push(item)
          }
        })
      })
      // 同list去重
      list.forEach(item => {
        arr.forEach((item2, i) => {
          if (item.id === item2.id) {
            arr.splice(i, 1)
          }
        })
      })
      // 添加
      arr.forEach(i => {
        this.list.push({
          needScancode: '1',
          pointName: i.name,
          pointId: i.id,
          code: i.code,
          id: i.id
        })
      })
      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>