CZC/operationSupport/src/views/patrolManagement/popups/patrolAdd.vue

<template>
  <div class="formContent">
    <el-form
      ref="formData"
      :model="formData"
      :rules="rules"
      label-width="85px"
      class="demo-ruleForm"
    >

      <div class="formContent-item_title">巡更类型定义</div>
      <template>
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="所属社区"
              prop="communityId"
              class="show-required-icon-star"
            >

              <el-select
                v-model="formData.communityId"
                placeholder="请选择社区"
              >
                <el-option
                  v-for="(item,index) in communityList"
                  :value="item.value"
                  :label="item.label"
                  :key="index"
                >
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="巡更类型"
              prop="patrolType"
              class="show-required-icon-star"
            >
              <el-select
                v-model="formData.patrolType"
                placeholder="请选择巡更类型"
                @change="patrolTypeClick"
              >
                <el-option
                  v-for="(item,index) in patrolTypeList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>

          </el-col>
        </el-row>
      </template>

      <div class="formContent-item_title">巡更内容定义</div>
      <!-- <template slot-scope="scope"> -->
      <div class="scrollBar">
        <el-row
          v-for="(items,indexs) in formData.contentDtoList"
          :key="indexs"
        >
          <el-col :span="12">
            <el-form-item
              label="巡更内容"
              :prop="'contentDtoList.'+indexs+'.content'"
              :rules="rules.content"
              class="show-required-icon-star"
            >
              <!-- :required="!item.content" -->
              <el-input
                v-model="formData.contentDtoList[indexs].content"
                placeholder="请输入巡更内容"
                clearable
              ></el-input>

            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item
              label="选项组成"
              class="show-required-icon-star"
              style="margin-right: 5px;"
            >

              <el-select
                v-model="formData.contentDtoList[indexs].optionValue"
                placeholder="请选择"
              >
                <el-option
                  v-for="(itemd,inded) in optionComposition"
                  :key="inded"
                  :value="itemd.value"
                  :label="itemd.label"
                >
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-tooltip
              effect="light"
              placement="bottom"
              content="添加"
              style="margin-right: 10px; "
              v-if="(formData.contentDtoList.length - 1) == indexs ? true : false"
            >
              <i
                class="zoniot_font zoniot-icon-tianjia1"
                @click="add"
              ></i>
            </el-tooltip>
            <el-tooltip
              effect="light"
              placement="bottom"
              content="删除"
            >
              <i
                class="zoniot_font zoniot-icon-shanjian"
                @click="deleteOne(indexs)"
              ></i>
            </el-tooltip>
          </el-col>

        </el-row>
      </div>

    </el-form>
  </div>
</template>

<script>
export default {
  props: ['params'],
  data () {
    return {
      formData: {
        communityId: '',
        patrolType: '',
        contentDtoList: [
          {
            content: '',
            optionValue: ''
          }
        ]
      },
      communityList: [],
      patrolTypeList: [
        {
          label: '市容市貌',
          value: 1
        },
        {
          label: '环境卫生',
          value: 2
        },
        {
          label: '公共秩序',
          value: 3
        },
        {
          label: '设备设施',
          value: 4
        },
        {
          label: '消防安全',
          value: 5
        },

      ],
      optionComposition: [
        {
          label: '是、否',
          value: '是、否'
        },
        {
          label: '坏、好',
          value: '坏、好'
        },
        {
          label: '有、无',
          value: '有、无',
        },
        {
          label: '差、好',
          value: '差、好'
        }
      ],
      rules: {
        communityId: [{ required: true, message: '请输入所属社区', trigger: 'change' },],
        patrolType: [{ required: true, message: '请输入巡更类型', trigger: 'change' },],
        content: { required: true, message: '请输入巡更内容', trigger: 'blur' },
      }
    }
  },
  methods: {


    patrolTypeClick () {
      this.$http.post('/czc-community/patrol/standard/list/content', { communityId: this.formData.communityId, patrolType: this.formData.patrolType }).then(({ status, data, msg }) => {
        if (status == 0) {
          if (data.length != 0) {
            this.formData.contentDtoList = [];
            data.map((item, index) => {
              this.formData.contentDtoList.push(
                {
                  content: item.content,
                  optionValue: item.optionValue
                }
              )
            })
          } else {
            this.formData.contentDtoList = [];
            this.formData.contentDtoList.push({
              content: '',
              optionValue: ''
            })
          }
        }
      })
    },


    getOrgTreeList () {
      this.$http.get('/czc-community/assets/community/list').then(({ status, data, msg }) => {
        if (status == 0) {
          this.communityList = [];
          data.map((item, index) => {
            this.communityList.push({
              label: item.communityName,
              value: item.id
            })
          });
        }
      })
    },
    submit () {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          let url = ''
          if (this.params.rowId == '1') {
            url = '/czc-community/patrol/standard/update'
          } else {
            url = '/czc-community/patrol/standard/add'
          }
          this.$http.post(url, this.formData).then(({ status, data, msg }) => {
            this.$message.success(msg);
            this.params.callback();
            this.$emit('close');
          })
        } else {
          return;
        }
      })
    },
    add () {
      this.formData.contentDtoList.push(
        {
          content: '',
          optionValue: ''
        }
      )
    },
    deleteOne (id) {
      if (this.formData.contentDtoList.length != 1) {
        this.formData.contentDtoList.splice(id, 1);
        return;
      }
    },
  },
  created () {
    this.getOrgTreeList();//获取社区内容
    debugger;
    if (this.params.rowId == '1') {

      this.formData.communityId = this.params.row.communityId;
      this.formData.patrolType = this.params.row.patrolType;
      this.formData.contentDtoList = [];
      this.params.row.contentVos.map((item, index) => {
        this.formData.contentDtoList.push({
          content: item.content,
          optionValue: item.optionValue
        })
      })

    }
  }
}


</script>


<style scoped lang='scss'>
.zoniot_font {
    line-height: 32px !important;
}
// .scrollBar {
//     overflow: hidden;
//     overflow-y: auto;
//     max-height: 200px;
// }
</style>