|
@@ -0,0 +1,170 @@
|
|
|
|
+#set(title="添加新闻")
|
|
|
|
+#@header()
|
|
|
|
+<style>
|
|
|
|
+ .img{cursor: pointer;max-height:128px;padding: 10px;max-width: 128px;margin-left: -10px;}
|
|
|
|
+ .mask{position:fixed;width:100%;height:100%;background-color:rgba(0,0,0,0.83);top:0;z-index:6666;overflow: hidden;}
|
|
|
|
+ #photo{width: 80%;}
|
|
|
|
+ input[type=file] {height:128px;opacity: 0;width: 128px;cursor: pointer;margin: 0 auto;}
|
|
|
|
+ .bo{margin:0 auto;width:200px;position:absolute;bottom:0;background-color: #2f4050;width: 100%;padding: 5px;}
|
|
|
|
+ .table > tbody > tr > td span{color:red;font-weight:bold;}
|
|
|
|
+ [v-cloak] {display: none;}
|
|
|
|
+</style>
|
|
|
|
+<body class="bg">
|
|
|
|
+<div id="app" v-cloak>
|
|
|
|
+ <form id="addForm" method="post">
|
|
|
|
+ <table class="table">
|
|
|
|
+ <tbody>
|
|
|
|
+ <tr>
|
|
|
|
+ <td width="150">文章标题 <span>*</span></td>
|
|
|
|
+ <td colspan="3">
|
|
|
|
+ <input type="text" class="form-control" v-model="item.mTitle">
|
|
|
|
+ </td>
|
|
|
|
+ </tr>
|
|
|
|
+ <tr>
|
|
|
|
+ <td width="150">文章类型 <span>*</span></td>
|
|
|
|
+ <td>
|
|
|
|
+ <select class="form-control" v-model="item.typeName" @change="selected()">
|
|
|
|
+ <option :value="type.id" v-for="type in type_list">{{type.name}}</option>
|
|
|
|
+ </select>
|
|
|
|
+ </td>
|
|
|
|
+ <td width="150">文章栏目 <span>*</span></td>
|
|
|
|
+ <td>
|
|
|
|
+ <select class="form-control" v-model="item.columnId">
|
|
|
|
+ <option :value="colmun.id" v-for="colmun in colmun_list">{{colmun.mColumnName}}</option>
|
|
|
|
+ </select>
|
|
|
|
+ </td>
|
|
|
|
+ </tr>
|
|
|
|
+ <tr>
|
|
|
|
+ <td width="150">文章封面</td>
|
|
|
|
+ <td colspan="3" style="overflow: hidden;">
|
|
|
|
+ <img class="img" alt="添加封面" :src="mCove==''?'#(path)/static/ui/img/icon_p.png':mCove">
|
|
|
|
+ <input type="file" accept="image/*" accept='image/*' v-on:change="change($event,0)" style="margin-top:-128px;width:70%;margin-left: -30px;">
|
|
|
|
+ </td>
|
|
|
|
+ </tr>
|
|
|
|
+ <tr>
|
|
|
|
+ <td>文章置顶</td>
|
|
|
|
+ <td>
|
|
|
|
+ <el-switch
|
|
|
|
+ v-model="item.isTop"
|
|
|
|
+ active-color="#13ce66"
|
|
|
|
+ inactive-color="#ff4949">
|
|
|
|
+ </el-switch>
|
|
|
|
+ </td>
|
|
|
|
+ <td width="150">文章状态 <span>*</span></td>
|
|
|
|
+ <td>
|
|
|
|
+ <select class="form-control" v-model="item.mRelease">
|
|
|
|
+ <option value="0">发布</option>
|
|
|
|
+ <option value="1">不发布</option>
|
|
|
|
+ </select>
|
|
|
|
+ </td>
|
|
|
|
+ </tr>
|
|
|
|
+ <tr>
|
|
|
|
+ <td style="vertical-align: top;">文章内容 <span>*</span></td>
|
|
|
|
+ <td colspan="3"><script id="editor" type="text/plain" style="width:100%;height:280px;text-align: left">{{item.mContent}}</script></td>
|
|
|
|
+ </tr>
|
|
|
|
+ </tbody>
|
|
|
|
+ </table>
|
|
|
|
+ <input type="hidden" name="dataImage" v-model="dataImage"/>
|
|
|
|
+ </form>
|
|
|
|
+ <div class="mask" v-show="show">
|
|
|
|
+ <img id="photo">
|
|
|
|
+ <div class="bo">
|
|
|
|
+ <div style="text-align: center;">
|
|
|
|
+ <button class="btn btn-primary" @click="save()">裁剪</button>
|
|
|
|
+ <button class="btn btn-danger" style="margin-left: 30px;" @click="cancel()">取消</button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+</div>
|
|
|
|
+#set(layer=true,util=true,vue=true,cropper=true,element=true,ueditor=true)
|
|
|
|
+#@op()
|
|
|
|
+#@js()
|
|
|
|
+<script>
|
|
|
|
+ var ue=UE.getEditor('editor',{
|
|
|
|
+ toolbars:[['FullScreen', 'Undo','Redo','forecolor','bold', 'italic','formatmatch', 'autotypeset','justifyleft', 'justifycenter', 'justifyright', 'justifyjustify','insertorderedlist', 'insertunorderedlist',
|
|
|
|
+ 'rowspacingtop', 'rowspacingbottom', 'lineheight','simpleupload','insertvideo','customstyle','paragraph','fontfamily', 'fontsize','inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols']]
|
|
|
|
+ });
|
|
|
|
+ var cropper = null;
|
|
|
|
+ var vm = new Vue({
|
|
|
|
+ el: "#app",
|
|
|
|
+ data: {
|
|
|
|
+ type_list:[{name:'时政信息',id:1},{name:'政策宣传',id:2}],
|
|
|
|
+ colmun_list:[],
|
|
|
|
+ item: {mTitle:'',mContent:'',typeName:1,mRelease:0,columnId:1,isTop:false,mCove:''},
|
|
|
|
+ show: false,
|
|
|
|
+ mCove: '',
|
|
|
|
+ dataImage: '',
|
|
|
|
+ dialogVisible:false
|
|
|
|
+ },
|
|
|
|
+ mounted: function () {
|
|
|
|
+ if ('#(op)' == 'edit') {
|
|
|
|
+ //this.item =#(banner);
|
|
|
|
+ //this.mCove = this.item.mCove;
|
|
|
|
+ //this.item.mShow=this.item.mShow==0?true:false;
|
|
|
|
+ }
|
|
|
|
+ this.item.isTop=this.item.isTop==true?1:0;
|
|
|
|
+ this.getColmun(1);
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ //选择分类
|
|
|
|
+ selected:function(){
|
|
|
|
+ this.getColmun(vm.item.typeName);
|
|
|
|
+ },
|
|
|
|
+ //选择栏目
|
|
|
|
+ getColmun:function(e){
|
|
|
|
+ sendAjax("#(path)/admin/work/news/colmun_list",{type:e},function(res){
|
|
|
|
+ vm.colmun_list=res;
|
|
|
|
+ vm.item.columnId=res[0].id;
|
|
|
|
+ cancelLoding();
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ //创建列表
|
|
|
|
+ change: function (e, index) {
|
|
|
|
+ var objUrl = vm.getUri(e.currentTarget.files[0]);
|
|
|
|
+ if (objUrl == null) {
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ vm.show = true;
|
|
|
|
+ vm.index = index;
|
|
|
|
+ document.getElementById("photo").src = objUrl;
|
|
|
|
+ cropper = getClipper(16 / 9, objUrl, 'photo');
|
|
|
|
+ },
|
|
|
|
+ getUri: function (file) {
|
|
|
|
+ var url = null;
|
|
|
|
+ if (window.createObjectURL != undefined) { // basic
|
|
|
|
+ url = window.createObjectURL(file);
|
|
|
|
+ } else if (window.URL != undefined) { // mozilla(firefox)
|
|
|
|
+ url = window.URL.createObjectURL(file);
|
|
|
|
+ } else if (window.webkitURL != undefined) { // webkit or chrome
|
|
|
|
+ url = window.webkitURL.createObjectURL(file);
|
|
|
|
+ }
|
|
|
|
+ return url;
|
|
|
|
+ },
|
|
|
|
+ //保存图像
|
|
|
|
+ save: function () {
|
|
|
|
+ vm.show = false;
|
|
|
|
+ var croppedCanvas = cropper.getCroppedCanvas({height: 480});
|
|
|
|
+ var dataUrl = croppedCanvas.toDataURL();
|
|
|
|
+ sendAjax("#(path)/admin/upload/uploadData", {dataImage: dataUrl}, function (res) {
|
|
|
|
+ vm.mCove = dataUrl;
|
|
|
|
+ vm.item.mCove = res.url;
|
|
|
|
+ cancelLoding();
|
|
|
|
+ })
|
|
|
|
+ cropper.destroy();
|
|
|
|
+ },
|
|
|
|
+ //取消剪裁
|
|
|
|
+ cancel: function () {
|
|
|
|
+ vm.show = false;
|
|
|
|
+ cropper.destroy();
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ $("#add").click(function () {
|
|
|
|
+ vm.item.isTop=vm.item.isTop==true?1:0;
|
|
|
|
+ vm.item.mContent=ue.getContent();
|
|
|
|
+ var data = {news: JSON.stringify(vm.item)};
|
|
|
|
+ ajaxSubmit("#(path)/admin/work/news/#(op)", data);
|
|
|
|
+ });
|
|
|
|
+</script>
|
|
|
|
+</body>
|
|
|
|
+</html>
|