yos_web/src/HManagement/siteManage/securityConfig/modules/projectCheckRule.vue

<template>
  <div>
    <el-button size="small" style="width:120px" type="primary" @click="querySite_Parameter">{{ $t('设 置') }}</el-button>
    <el-dialog :title="$t(`项目查重规则`)" append-to-body :visible.sync="dialogEditVisible" width="860px">
      <el-row :gutter="16">
        <el-col :span="24" style="margin-top: -20px">
          <span style="color: red">{{ $t('注意:每层的查重条件可多选字段') }}</span>
        </el-col>
        <el-col :span="24" style="margin-top: 20px">
          <div>
            <span style="margin-right: 10px">{{$t(`项目名称查重排除文字`)}}:</span>
            <el-tooltip placement="top" style="margin-right: 10px">
              <div slot="content">{{$t('项目名称查重排除文字，是项目名称查重前提条件之一，设置的文字，是项目名称查重时需排除掉的文字。')}}<br>{{$t('项目名称查重需先排除设置文字后，再将名称剩下的文字进行查重。')}}</div>
              <img style="vertical-align: middle" width="14px" height="14px" src="../../../../assets/icons/prompt_icon.svg" >
            </el-tooltip>
            <el-tag v-for="(item,index) in projectnameexcludefields" :key="index" style="margin-right: 10px" class="mt-10" closable @close="tagDel(item,index)">{{item}}</el-tag>
            <el-button type="primary" size="mini" @click="setWordVisible = true">{{$t(`添加`)}}</el-button>
          </div>
        </el-col>
        <el-col :span="24" style="margin-top: 20px">
          <span style="margin-right: 10px">{{$t(`查重字符数`)}}:</span>
          <el-input v-model="projectrepeatnum" style="width: 200px;margin-right: 10px" :placeholder="$t(`设置查重字符数`)" size="small"></el-input>
          <el-tooltip placement="top">
            <div slot="content">{{$t('查重字符数，是项目名称查重判断依据之一，项目名称排除设置文字后，剩下的文字进行项目名称查重，若重复的文字 ≥ 查重字符数，则判断该项目名称重复。')}}</div>
            <img style="vertical-align: middle" width="14px" height="14px" src="../../../../assets/icons/prompt_icon.svg" >
          </el-tooltip>
        </el-col>
        <el-col :span="24" style="margin-top: 20px">
          <div style="width: 50px" class="inline-16">
            {{ $t('第一层') }}:
          </div>
          <div style="width: 580px;" class="inline-16" >
            <el-select v-model="fields1" multiple :placeholder="$t(`请选择字段`)" style="width: 100%"  size="mini">
              <el-option
                  v-for="item in options"
                  :key="item.column_name"
                  :label="$t(item.column_name)"
                  :value="item.column_name">
                <span style="float: left">{{ $t(item.column_name) }}</span>
                <span style="float: right; color: #8492a6; font-size: 12px">{{ item.column_comment?$t(item.column_comment):'' }}</span>
              </el-option>
            </el-select>
          </div>
          <div style="width: 100px;" class="inline-16" >
            <el-select v-model="factor1" :placeholder="$t('请选择')" style="width: 100%"  size="mini">
              <el-option
                  v-for="item in relations"
                  :key="item.value"
                  :label="$t(item.label)"
                  :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div style="width: 50px" class="inline-16">
            {{ $t('关系') }}
          </div>
        </el-col>
        <el-col :span="24" style="margin-top: 20px">
          <div style="width: 50px" class="inline-16">
            {{ $t('第二层') }}:
          </div>
          <div style="width: 580px;" class="inline-16" >
            <el-select v-model="fields2" multiple :placeholder="$t(`请选择字段`)" style="width: 100%"  size="mini">
              <el-option
                  v-for="item in options"
                  :key="item.column_name"
                  :label="$t(item.column_name)"
                  :value="item.column_name">
                <span style="float: left">{{ $t(item.column_name) }}</span>
                <span style="float: right; color: #8492a6; font-size: 12px">{{ item.column_comment?$t(item.column_comment):'' }}</span>
              </el-option>
            </el-select>
          </div>
          <div style="width: 100px;" class="inline-16" >
            <el-select v-model="factor2" :placeholder="$t('请选择')" style="width: 100%"  size="mini">
              <el-option
                  v-for="item in relations"
                  :key="item.value"
                  :label="$t(item.label)"
                  :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div style="width: 50px" class="inline-16">
            {{ $t('关系') }}
          </div>
        </el-col>
        <el-col :span="24" style="margin-top: 20px">
          <div style="width: 50px" class="inline-16">
            {{ $t('第三层') }}:
          </div>
          <div style="width: 580px;" class="inline-16" >
            <el-select v-model="fields3" multiple :placeholder="$t(`请选择字段`)" style="width: 100%"  size="mini">
              <el-option
                  v-for="item in options"
                  :key="item.column_name"
                  :label="$t(item.column_name)"
                  :value="item.column_name">
                <span style="float: left">{{ $t(item.column_name) }}</span>
                <span style="float: right; color: #8492a6; font-size: 12px">{{ item.column_comment?$t(item.column_comment):'' }}</span>
              </el-option>
            </el-select>
          </div>
          <div style="width: 100px;" class="inline-16" >
            <el-select v-model="factor3" :placeholder="$t('请选择')" style="width: 100%"  size="mini">
              <el-option
                  v-for="item in relations"
                  :key="item.value"
                  :label="$t(item.label)"
                  :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div style="width: 50px" class="inline-16">
            {{ $t('关系') }}
          </div>
        </el-col>
        <el-col :span="24" style="margin-top: 20px">
          <span >{{ $t('项目报备成功保护期设置') }}:</span>
        </el-col>
        <el-col :span="24" style="margin-top: 20px">
          <div style="width: 50px" class="inline-16">
            {{ $t('保护期') }}:
          </div>
          <div style="width: 580px;" class="inline-16" >
            <el-select v-model="projectprotectionperiod"  :placeholder="$t('请选择')" style="width: 100%"  size="mini">
              <el-option
                  v-for="item in monthOption"
                  :key="item.value"
                  :label="$t(item.label)"
                  :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div style="width: 50px" class="inline-16">
            {{ $t('个月') }}
          </div>
        </el-col>
        <el-col :span="24" style="margin-top: 20px">
          <span style="color: red">{{$t('项目保护期设为0,则不管控保护期；为1-12,则为保护期限')}}；</span>
        </el-col>
      </el-row>
      <div class="dialog-footer">
        <el-button size="small" @click="dialogEditVisible = false" class="normal-btn-width">{{$t('取 消')}}</el-button>
        <el-button size="small" type="warning"  class="normal-btn-width btn-warning" @click="onSubmit">{{$t('确 定')}}</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="$t(`添加文字`)" append-to-body :visible.sync="setWordVisible" width="560px" :show-close="false">
      <div style="margin: auto">
        <span>{{$t(`排除文字`)}}：</span>
        <el-input style="width: 450px" v-model="exclude" placeholder="请输入内容"></el-input>
      </div>
      <div class="dialog-footer">
        <el-button size="small" @click="setWordVisible = false;exclude = ''" class="normal-btn-width">{{$t('取 消')}}</el-button>
        <el-button size="small" type="primary"  class="normal-btn-width" @click="onExclude">{{$t('确 定')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "customerCheckRule",
  data(){
    return {
      dialogEditVisible:false,
      setWordVisible:false,
      monthOption:[
        {
          value:'0',
          label: '0'
        },
        {
          value:'1',
          label: '1'
        },
        {
          value:'2',
          label: '2'
        },
        {
          value:'3',
          label: '3'
        },
        {
          value:'4',
          label: '4'
        },
        {
          value:'5',
          label: '5'
        },
        {
          value:'6',
          label: '6'
        },
        {
          value:'7',
          label: '7'
        },
        {
          value:'8',
          label: '8'
        },
        {
          value:'9',
          label: '9'
        },
        {
          value:'10',
          label: '10'
        },
        {
          value:'11',
          label: '11'
        },
        {
          value:'12',
          label: '12'
        }
      ],
      projectprotectionperiod:'0',
      options: [],
      fields1: [],
      fields2: [],
      fields3: [],
      factor1:'并且',
      factor2:'并且',
      factor3:'并且',
      relations: [
        {
          value:'and',
          label: this.$t('并且')
        },
        {
          value:'or',
          label: this.$t('或者')
        }
      ],
      relation:'',
      exclude:'',
      projectnameexcludefields:[],
      projectrepeatnum:0
    }
  },
  methods:{
    querySite_Parameter(){
      this.dialogEditVisible = true
      this.relation = this.relations[0].value
      this.queryTable()
      this.queryRule()
    },
    async queryTable(){
      const res = await this.$api.requested({
        "classname": "sysmanage.develop.optiontype.optiontype",
        "method": "optiontypeselect",
        "content": {
          "pageNumber": 1,
          "pageSize": 50,
          "typename": "tablecolumnselect",
          "parameter": {
            "table_name": "sa_project"
          }
        }
      })
      this.options = res.data
    },
    async onSubmit(){
      const res = await this.$api.requested({
        "id": "20230408091702",
        "content": {
          "projectcheckrule": {
            "fields1": this.fields1,
            "factor1": this.factor1,
            "fields2":this.fields2,
            "factor2": this.factor2,
            "fields3":this.fields3,
            "factor3": this.factor3
          },
          "projectprotectionperiod":this.projectprotectionperiod,
          "projectnameexcludefields":this.projectnameexcludefields,
          "projectrepeatnum":this.projectrepeatnum
        },
      })
      this.tool.showMessage(res,()=>{
        this.$emit('queryRule')
        this.dialogEditVisible = false
        this.fields1 = []
        this.fields2 = []
        this.fields3 = []
        this.projectprotectionperiod = 0
        this.projectrepeatnum = 0
      })
    },
    onClose(){
      this.dialogEditVisible = false
      this.fields1 = []
      this.fields2 = []
      this.fields3 = []
    },
    /*查重规则*/
    async queryRule(){
      this.projectnameexcludefields = []
      const res = await this.$api.requested({
        "id": "20230410090502",
        "content": {},
      })
      this.fields1 = res.data.projectcheckrule.fields1
      this.fields2 = res.data.projectcheckrule.fields2
      this.fields3 = res.data.projectcheckrule.fields3
      this.factor1 = res.data.projectcheckrule.factor1
      this.factor2 = res.data.projectcheckrule.factor2
      this.factor3 = res.data.projectcheckrule.factor3
      this.projectprotectionperiod= res.data.projectprotectionperiod
      this.projectrepeatnum = res.data.projectrepeatnum
      this.projectnameexcludefields = res.data.projectnameexcludefields?res.data.projectnameexcludefields:[]
    },
    /*设置排除文字*/
    onExclude(){
      this.projectnameexcludefields.push(this.exclude)
      this.setWordVisible = false
      this.exclude = ''
    },
    tagDel(val,index){
      this.projectnameexcludefields.splice(index,1)
    }
  }
}
</script>

<style scoped>
/deep/ .el-message-box--center .el-message-box__title {
  position: relative;
  display: flex;
  align-items: normal;
  justify-content: left !important;
}
</style>