dvcp_v2_webapp/packages/conv/AppPatrolReportSet/AppPatrolReportSet.vue

<template>
  <ai-detail class="AppPatrolReportSet">
    <ai-title slot="title" title="巡查上报设置"  isShowBottomBorder>
      <el-button size="small" type="primary" icon="iconfont iconAdd" slot="rightBtn" @click="add">添加节点</el-button>
    </ai-title>
    <template slot="content">
      <div class="list" v-if="list.length">
        <div class="item" v-for="(item, index) in list" :key="index">
          <div class="btn">
            <el-button type="text" @click="edit(index)">编辑</el-button>
            <el-button type="text" @click="del(index)">删除</el-button>
          </div>
          <div class="index">{{index < 9 ? `0${index+1}` : `${index+1}`}}</div>
          <div class="info">
            <div class="label">节点类型</div>
            <div class="value">{{item.nodeType == 0 ? '首节点' : $dict.getLabel('prfcNodeType', item.nodeType)}}</div>
          </div>
          <div class="info">
            <div class="label">上级节点网络</div>
            <div class="value">{{item.girdName}}<span class="span" v-if="item.nodeType == 2 && item.onlyCoordination == '1'">仅协同部门</span></div>
          </div>
          <div class="flex">
            <div class="info">
              <div class="label">生效功能</div>
              <div class="value">
                <span v-if="item.functionAdd == 1">添加</span>
                <span v-if="item.functionHandle == 1">办理</span>
                <span v-if="item.functionTransmit == 1">转交</span>
              </div>
            </div>
            <div class="info">
              <div class="label">生效身份</div>
              <div class="value">
                <span v-if="item.roleMember == 1">网格员</span>
                <span v-if="item.roleAdmin == 1">网格长</span>
              </div>
            </div>
          </div>

          <div v-if="item.nodeType == 3">
            <div class="info">
              <div class="label">同级节点网络</div>
              <div class="value">{{item.girdName2}}<span class="span" v-if="item.nodeType == 3 && item.onlyCoordination == '1'">仅协同部门</span></div>
            </div>
            <div class="flex">
              <div class="info">
                <div class="label">生效功能</div>
                <div class="value">
                  <span v-if="item.functionAdd2 == 1">添加</span>
                  <span v-if="item.functionHandle2 == 1">办理</span>
                  <span v-if="item.functionTransmit2 == 1">转交</span>
                </div>
              </div>
              <div class="info">
                <div class="label">生效身份</div>
                <div class="value">
                  <span v-if="item.roleMember2 == 1">网格员</span>
                  <span v-if="item.roleAdmin2 == 1">网格长</span>
                </div>
              </div>
              <!-- <div class="info">
                <div class="label">条件约束</div>
                <div class="value">名称约束</div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
      <ai-empty v-else>暂无数据</ai-empty>
      
      <ai-dialog :visible.sync="dialog" :title="dialogTitle" @closed="$refs.form.resetFields()" @onConfirm="onConfirm" width="70%">
        <el-form ref="form" :rules="rules" size="small" :model="form" label-width="110px">
          <el-form-item label="节点类型" prop="nodeType" v-if="form.nodeType === '0'">
            <ai-select disabled
              v-model="form.nodeType"
              clearable
              placeholder="请选择..."
              :selectList="nodeTypeDictList">
            </ai-select>
          </el-form-item>
          <el-form-item label="节点类型" prop="nodeType" v-else>
            <ai-select :disabled="getGirdList.length == 1 && form.nodeType == '1'"
              v-model="form.nodeType"
              clearable
              placeholder="请选择..."
              :selectList="dict.getDict('prfcNodeType')" @change="changeNodeType">
            </ai-select>
          </el-form-item>
          <el-form-item label="选择节点网格" prop="girdId" >
            <ai-picker v-if="form.nodeType === '0'"
              :ops="{label: 'girdName'}"
              dialogTitle="选择节点网格"
              action="/app/appgirdinfo/girdList"
              :instance="instance"
              @pick="onGirdChange"
              v-model="form.girdIdList">
              <div class="userSelcet">
                <span style="color: #606266;" v-if="form.girdIdList.length">{{ form.girdName }}</span>
                <span v-else>选择节点网格</span>
                <i class="el-icon-arrow-down"></i>
              </div>
            </ai-picker>
            <el-input placeholder="节点网格" v-model="form.girdName" disabled v-else></el-input>
            <el-checkbox v-model="sameLevelUsed" disabled>当前选中网格层级生效</el-checkbox>
            <el-checkbox v-model="form.onlyCoordination" v-if="form.nodeType == '2'" true-label="1" false-label="0">仅协同部门</el-checkbox>
          </el-form-item>
          <el-form-item label="生效功能">
            <el-checkbox v-model="form.functionAdd" true-label="1" false-label="0">添加</el-checkbox>
            <el-checkbox v-model="form.functionHandle" true-label="1" false-label="0">办理</el-checkbox>
            <el-checkbox v-model="form.functionTransmit" true-label="1" false-label="0">转交</el-checkbox>
          </el-form-item>
          <el-form-item label="生效身份">
            <el-checkbox v-model="form.roleMember" true-label="1" false-label="0">网格员</el-checkbox>
            <el-checkbox v-model="form.roleAdmin" true-label="1" false-label="0">网格长</el-checkbox>
          </el-form-item>
          <div v-if="form.nodeType == 3">
            <el-form-item label="同级节点网格" prop="girdId2">
              <el-input placeholder="节点网格" v-model="form.girdName2" disabled></el-input>
              <el-checkbox v-model="sameLevelUsed" disabled>当前选中网格层级生效</el-checkbox>
              <el-checkbox v-model="form.onlyCoordination" v-if="form.nodeType == '3'" true-label="1" false-label="0">仅协同部门</el-checkbox>
            </el-form-item>
            <el-form-item label="生效功能">
              <el-checkbox v-model="form.functionAdd2" true-label="1" false-label="0">添加</el-checkbox>
              <el-checkbox v-model="form.functionHandle2" true-label="1" false-label="0">办理</el-checkbox>
              <el-checkbox v-model="form.functionTransmit2" true-label="1" false-label="0">转交</el-checkbox>
            </el-form-item>
            <el-form-item label="生效身份">
              <el-checkbox v-model="form.roleMember2" true-label="1" false-label="0">网格员</el-checkbox>
              <el-checkbox v-model="form.roleAdmin2" true-label="1" false-label="0">网格长</el-checkbox>
            </el-form-item>
          </div>
        </el-form>
      </ai-dialog>
    </template>
    <template slot="footer">
      <el-button @click="getList">返回</el-button>
      <el-button type="primary" @click="confirm">提交</el-button>
    </template>
  </ai-detail>
</template>

<script>
  export default {
    name: 'AppPatrolReportSet',
    label: '巡查上报设置',

    props: {
      instance: Function,
      dict: Object,
      permissions: Function
    },

    data () {
      return {
        dialog: false,
        dialogTitle: '',
        form: {
          nodeType: '', //0：首节点、1：上级、2：同级、3：混合
          girdIdList: [],
          girdId: '',
          girdCode: '',
          girdLevel: '',
          girdName: '',
          functionAdd: '1',
          functionHandle: '1',
          functionTransmit: '1',
          roleAdmin: '1',
          roleMember: '1',
          girdId2: '',
          girdCode2: '',
          girdLevel2: '',
          girdName2: '',
          functionAdd2: '1',
          functionHandle2: '1',
          functionTransmit2: '1',
          roleAdmin2: '1',
          roleMember2: '1',
          onlyCoordination: '1'
        },
        list: [],
        nodeTypeDictList: [{dictName: '首节点', dictValue: '0'}],
        sameLevelUsed: true,
        getGirdList: [],
        editIndex: ''
      }
    },
    computed: {
      rules() {
        return {
          nodeType: [{ required: true, message: '请选择节点类型', trigger: 'change'}],
          girdId: [{ required: true, message: '请选择节点网络', trigger: 'change'}],
          girdId2: [{ required: true, message: '请选择同级节点网格', trigger: 'change'}],
        }
      },
    },
    created() {
      this.dict.load('prfcNodeType').then(() => {
        this.getList()
      })
    },
    methods: {
      add() {
        this.form = {
          nodeType: '', //0：首节点、1：上级、2：同级、3：混合
          girdIdList: [],
          girdId: '',
          girdCode: '',
          girdLevel: '',
          girdName: '',
          functionAdd: '1',
          functionHandle: '1',
          functionTransmit: '1',
          roleAdmin: '1',
          roleMember: '1',
          girdId2: '',
          girdCode2: '',
          girdLevel2: '',
          girdName2: '',
          functionAdd2: '1',
          functionHandle2: '1',
          functionTransmit2: '1',
          roleAdmin2: '1',
          roleMember2: '1',
          onlyCoordination: '1'
        }
        if(this.list.length > 0) {
          this.getGird(this.list.length-1)
        }else { //首节点
          this.form.nodeType = '0'
        }
        this.dialogTitle = '添加节点'
        this.dialog = true
        this.$refs.form.resetFields()
      },
      del(index) {
        this.$confirm('确定删除该节点？').then(() => {
          this.list.splice(index, 1)
        })
      },
      edit(index) {
        this.editIndex = index
        this.form = {...this.list[index]}
        if(this.form.nodeType != '0') {
          this.getGird(index-1)
        } 
        this.dialogTitle = '编辑节点'
        this.dialog = true
      },
      onConfirm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if(this.dialogTitle == '添加节点') {
              this.list.push(this.form)
            }else {
              this.list.splice(this.editIndex, 1, this.form)
            }
            this.dialog = false
          }
        })
      },
      getList() {
        this.instance.post(`/app/apppatrolreportflowconfigv2/queryNew`).then(res => {
          if (res.code == 0) {
            this.list = res.data
          }
        })
      },
      onGirdChange(e) {
        this.form.girdId = e[0].id
        this.form.girdCode = e[0].girdCode
        this.form.girdLevel = e[0].girdLevel
        this.form.girdName = e[0].girdName
      },
      changeNodeType(e) { //1 上下级节点取数组0；2同级节点选择数组1; 3混合节点主取数组0，同级选择数组1
        console.log(e)
        var arr = []
        if(e == 1) {
          arr.push(this.getGirdList[0])
        }
        if(e == 2) {
          arr.push(this.getGirdList[1])
        }
        if(e == 3) {
          arr.push(this.getGirdList[0])
          this.form.girdId2 = this.getGirdList[1].id
          this.form.girdCode2 = this.getGirdList[1].girdCode
          this.form.girdLevel2 = this.getGirdList[1].girdLevel
          this.form.girdName2 = this.getGirdList[1].girdName
        }
        this.onGirdChange(arr)
      },
      getGird(index) {
        var girdCode = this.list[index].girdCode
        this.instance.post(`app/apppatrolreportflowconfigv2/choiseGird?previousGirdCode=${girdCode}`).then(res => {
          if (res.code == 0) {
            this.getGirdList = res.data
            if(res.data.length == 1 && this.dialogTitle == '添加节点') { //返回数据一条表示nodeType 1 上下级节点；混合节点主去数组0，同级选择数组1；同级节点选择数组1
              this.form.nodeType = '1'
              this.onGirdChange(res.data)
            }
          }
        })
      },
      confirm() {
        this.instance.post(`/app/apppatrolreportflowconfigv2/addOrUpdate`, this.list).then(res => {
          if (res.code == 0) {
            this.$message.success('提交成功')
            this.getList()
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .AppPatrolReportSet {
    height: 100%;
    .list {
      padding: 0 16px 16px;
      background-color: #fff;
    }
    .item {
      padding: 16px 0 4px 26px;
      position: relative;
      border-bottom: 1px solid #F2F2F2;
      .info {
        height: 22px;
        font-family: MicrosoftYaHei;
        font-size: 14px;
        color: #888;
        line-height: 22px;
        margin-bottom: 16px;
        .label {
          display: inline-block;
          width: 112px;
          color: #888;
        }
        .value {
          display: inline-block;
          width: calc(100% - 112px);
          color: #222;
          span {
            display: inline-block;
            margin-right: 24px;
          }
          .span {
            margin-left: 16px;
          }
        }
      }
      .index {
        position: absolute;
        top: 16px;
        left: 0;
        height: 21px;
        font-family: DINAlternate-Bold;
        font-weight: 700;
        font-size: 18px;
        color: #666;
      }
      .btn {
        position: absolute;
        right: 0;
        top: 16px;
      }
      .flex {
        display: flex;
        .info {
          width: 33.3%;
        }
      }
    }
    :deep(.ai-select),
    :deep(.el-input) {
      display: inline-block;
      width: 50%;
      margin-right: 16px;
    }
    :deep(.AiPicker) {
      display: inline-block;
      width: 50%;
      margin-right: 16px;
      border: 1px solid #d0d4dc;
      padding-left: 16px;
      box-sizing: border-box;
      border-radius: 4px;
      position: relative;
      .el-icon-arrow-down {
        position: absolute;
        top: 8px;
        right: 8px;
      }
    }
    
  }
</style>