udi-cpt-vue/src/views/anno/anncmnt/ylqxzczhDialog.vue

<template>
  <div>
    <el-card>
      <el-form  :model="inputQuery"  label-width="120px" >
        <template v-for="(itemRow, indexRow) in fromList">
          <el-row :gutter="20" class="el-row" type="flex">
            <template v-for="(item, index) in itemRow.list">
              <el-col :span="item.width" class="el-col" type="flex">
                <div class="text item">
                  <el-form-item v-if="item.columnType =='input'"  :rules="item.checkRulesObj" :prop="item.columnName">
                        <span slot="label">
                          {{item.columnDesc}}
                        </span>
                    <el-input
                      v-model="inputQuery[item.columnName]"
                      :style="item.style"
                      :size="item.size"
                      :type="item.inputType"
                      :placeholder="item.columnDesc"
                      :disabled="item.disabled"
                      @input="executeFuc($event,'5',item.clickFuc)"
                    ></el-input>
                  </el-form-item>

                  <el-form-item v-if="item.columnType =='radio'" :prop="item.columnName">
                        <span slot="label">
                          {{item.columnDesc}}
                        </span>
                    <el-radio-group :style="item.style" v-model="inputQuery[item.columnName]">
                      <el-radio
                        v-for="dict in item.lableRuleObj"
                        :key="parseInt(dict.value)"
                        :label="parseInt(dict.value)"
                        :disabled="item.disabled"
                      >{{dict.label}}</el-radio>
                    </el-radio-group>
                  </el-form-item>

                  <el-form-item v-if="item.columnType =='select'" :prop="item.columnName">
                        <span slot="label">
                          {{item.columnDesc}}
                        </span>
                    <el-select v-model="inputQuery[item.columnName]" :style="item.style">
                      <el-option
                        v-for="dict in item.lableRuleObj"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item v-if="item.columnType =='selectServer'" :prop="item.columnName">
                        <span slot="label">
                          {{item.columnDesc}}
                        </span>
                    <el-select
                      v-model="inputQuery[item.columnName]"
                      :style="item.style"
                      :placeholder="item.columnDesc"
                      @change="executeFuc($event,'5',item.clickFuc)"
                      :disabled="executeEval(null,item.disabledFuc,false)"
                      filterable
                      remote
                      :remote-method="(query) => executeFuc(query,'5',item.dataFuc)"
                      clearable>
                      <el-option
                        v-for="item in options[item.dataFuc]"
                        :key="item.code"
                        :label="item.code"
                        :value="item.code"
                      >
                        <span style="float: left">{{ item.label }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{
                            item.code
                          }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item v-if="item.columnType =='date'"  :rules="item.checkRulesObj" :prop="item.columnName">
                        <span slot="label">
                          {{item.columnDesc}}
                        </span>
                    <el-date-picker
                      v-model="inputQuery[item.columnName]"
                      :style="item.style"
                      value-format="yyyy-MM-dd"
                      type="date"
                      :placeholder="item.columnDesc"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item v-if="item.columnType =='treeCustom'" :prop="item.columnName">
                        <span slot="label">
                          {{item.columnDesc}}
                        </span>
                    <treeselect
                      v-model="inputQuery[item.columnName]"
                      :options="menuOptions"
                      :normalizer="normalizer"
                      :show-count="true"
                      :placeholder="item.columnName"
                    />
                  </el-form-item>
                </div>
              </el-col>
            </template>
          </el-row>
        </template>
        <div style='text-align: center; margin-bottom: 10px;margin-top: 18px ;'>
          <el-button  @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="submitInv">提交</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {savegg} from "@/api/anno/anncmntYlqxzczh";
import {getYlqxzcrList} from "@/api/anno/anncmntYlqxzcr";
import {
  getHead,executeFuc
} from "@/utils/customConfig";

export default {
  name: "ylqxzcrDialog",
  props: {
    closeDialog: {
      type: Function,
      required: true,
    },
    formName: {
      type: Object,
      required: true,
    },
    inputQuery: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      tableHeader:[],
      queryList:[],
      fromList:[],
      tableObj:[],
      invList:[],
      options: {
          getYlqxzcr:[],
      }
    }
  },
  methods: {
    submitInv(){
      if(this.formName==1){
        savegg(this.inputQuery,"add").then((response) => {
          if(response.code == 20000){
            this.closeDialog();
          }else{
            this.$message.error(response.message);
          }

        })
          .catch(() => {
            this.$message.error("添加失败");
          });
      }else{
        savegg(this.inputQuery,"edit").then((response) => {
          if(response.code == 20000){
            this.closeDialog();
          }else{
            this.$message.error(response.message);
          }

        })
          .catch(() => {
            this.$message.error("添加失败");
          });
      }
    },
    executeFuc(row,type,clickFuc,value){
      return executeFuc(this,row,type,clickFuc,value);
    },
    executeEval(row,expression,defaultRet){
      if(expression){
        return eval(expression);
      }
      return defaultRet;
    },
    getYlqxzcr(_this,query) {
      getYlqxzcrList()
        .then((response) => {
          _this.options.getYlqxzcr = response.data || []
        })
        .catch(() => {
          _this.options.getYlqxzcr = []
        });
    },
     changeYlqxzcr(_this,val) {
       let obj = {};
        obj = _this.options.getYlqxzcr.find((item)=>{ // 这里的userList就是上面遍历的数据源
            return item.code === val; // 筛选出匹配数据
        });
        _this.inputQuery.regCompanyName = obj.label;
        _this.inputQuery.regCreditCode = obj.code;
        console.log(_this.inputQuery)
     },
    change(_this) {
      var pinyin = require("pinyin");
      var py = pinyin(_this.inputQuery.name, {
        style: pinyin.STYLE_FIRST_LETTER, // 设置拼音风格
        heteronym: true,
      });
      var str = "";
      py.forEach((item) => {
        str = str + item[0];
      });
      _this.inputQuery.spell = str;
    },
  },
  components: {},
  created() {
    getHead("ylqxzczh","1").then((re) => {
      // 处理返回的数据
      this.tableObj = re.data;
      this.tableHeader = re.data.tableList;
      this.queryList = re.data.queryList;
      this.fromList = re.data.fromList;
    });
    this.getYlqxzcr(this);
  },
}
</script>

<style scoped>

</style>