aiforge/web_src/js/components/EditAboutInfo.vue

<template>
  <div>
      <h4 id="about-desc" class="ui header desc-home">简介
        <a class="edit-icon" href="javascript:void(0)" @click="editClick">
        <i class="gray edit outline icon" style="margin-right: 0;"></i>
        </a>
    </h4>
    <edit-dialog-cmpt 
		:vmContext="vmContext" 
		dialogTitle="编辑仓库信息" 
		v-model="editDataDialog"
		:deleteCallback="editDataFunc"
		:deleteLoading ="editDataListLoading"
    deleteParam = "ruleForm"
    @input="initForm"
		>
			<div slot="title">
				
			</div>
			<div slot="content">
				<el-form label-position="top" :model="info" :rules="rule" ref="ruleForm">
					<el-form-item label="简介" prop="desc">
						<el-input v-model="info.desc" type="textarea" placeholder="请输入内容" :autosize="{minRows:4,maxRows:6}" maxlength="255" show-word-limit></el-input>
					</el-form-item>
					<el-form-item label="主页" prop="index_web" >
						<el-input v-model="info.index_web" placeholder="主页(eg: https://git.openi.org.cn)"></el-input>
					</el-form-item>
				</el-form>
			</div>
    </edit-dialog-cmpt>
  </div>
</template>

<script>

const {_AppSubUrl, _StaticUrlPrefix, csrf} = window.config;

import editDialogCmpt from './basic/editDialog.vue';


export default {
  components: {
    editDialogCmpt,
  },
  data() {
    return {
      vmContext: this,
      editDataDialog: false,
      editDataListLoading: false,
      url: '',
      info: {
        desc: '',
        index_web: '',
        repo_name_name: '',
        alias:''
      },
    //   rule1:[{min:3,max:5,message:'1',trigger:"blur"}],
      rule: {
        index_web: [
          {required: false, pattern: /(^$)|(^(http|https):\/\/(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).*)|(^(http|https):\/\/[a-zA-Z0-9]+([_\-\.][a-zA-Z0-9]+)*\.[a-zA-Z]{2,10}(:[0-9]{1,10})?(\?.*)?(\/.*)?$)/,message:'请输入有效的URL',tigger:['change','blur']}
        ]
      }
    };
  },
  methods: {
    editClick() {
      this.editDataDialog = true;
    },
    getDesc() {
      const el = $('span.description').text();
      this.info.desc = el;
    },
    getWeb() {
      const el = $('a.link.edit-link').text();
      this.info.index_web = el;
    },
    getRepoName() {
      const el = this.url.split('/')[2];
      this.info.repo_name = el;
      this.info.alias = $('input#edit-alias').val()
    },
    initForm(diaolog) {
      if (diaolog === false) {
        this.getRepoName();
        this.getDesc();
        this.getWeb();
      }

    },
    editDataFunc(formName) {
      this.$refs[formName].validate((valid)=>{
        if (valid) {
          this.$axios({
            method: 'post',
            url: this.url,
            header: {'content-type': 'application/x-www-form-urlencoded'},
            data: this.qs.stringify({
              _csrf: csrf,
              action: 'update',
              alias:this.info.alias,
              repo_name: this.info.repo_name,
              description: this.info.desc,
              website: this.info.index_web
            })
          }).then((res) => {
            location.reload();
            this.editDataDialog = false;
          }).catch((error) => {
            this.editDataDialog = false;
          })
        }
        else {
          return false;
        }
      })

    },
    getUrl() {
      const url = `${window.location.pathname}/settings`;
      this.url = url;
    }
  },
  mounted() {
    this.getUrl();
    this.getRepoName();
    this.getDesc();
    this.getWeb();
  },
  watch:{
    'info.desc'(val){
      if(val.length===256){
        this.info.desc = val.substr(0,255)
      }

    }
  },
  created() {
    
  }

};
</script>

<style scoped>
.edit-icon{
    color: #8c92a4;
}
.desc-home{
  display: flex;
  justify-content: space-between;
}

</style>