483 lines
27 KiB
Plaintext
483 lines
27 KiB
Plaintext
<%@ Page Title="後端管理" Language="C#" MasterPageFile="~/admin/Templates/TBS5ADM001/MasterPage.master" AutoEventWireup="true" CodeFile="news_reg.aspx.cs" Inherits="admin_news_news_reg" ValidateRequest="false" %>
|
||
|
||
<%@ Register Src="~/admin/_uc/alert.ascx" TagPrefix="uc1" TagName="alert" %>
|
||
<asp:Content ID="Content1" ContentPlaceHolderID="page_header" runat="Server">
|
||
|
||
</asp:Content>
|
||
<asp:Content ID="Content4" ContentPlaceHolderID="footer_script" runat="Server">
|
||
<link href="../../App_Script/bootstrap_toggle/css/bootstrap-toggle.min.css" rel="stylesheet" />
|
||
<script src="../../App_Script/bootstrap_toggle/js/bootstrap-toggle.min.js"></script>
|
||
<!--編緝器-->
|
||
<script type="text/javascript" src="<%=ResolveUrl("~/admin/ckeditor/ckeditor.js") %>"></script>
|
||
<script type="text/javascript">
|
||
CKEDITOR.config.toolbar = 'Default';
|
||
</script>
|
||
<!--編緝器-->
|
||
<script>
|
||
//圖片
|
||
$(document).ready(function () {
|
||
$('#<%=AddBtn.ClientID%>').addClass('d-none');
|
||
var obj = $('a.picPath');
|
||
if (obj.length > 0) {
|
||
for (i = 0; i < obj.length; i++) {
|
||
$('#pics').append('<input type="file" data-id="' + $(obj[i]).attr('data-id') + '" name="picUpload' + $(obj[i]).attr('data-id') + '" id="picUpload' + $(obj[i]).attr('data-id') + '" />');
|
||
}
|
||
bindPics();
|
||
}
|
||
});
|
||
|
||
function bindPics(add =true) {
|
||
$('.giftItems input[type=file]').unbind();
|
||
$('.giftItems input[type=file]').change(function () {
|
||
InitPIcs(this, add);
|
||
});
|
||
$('.picPath').click(function () {
|
||
var id = $(this).attr('data-id');
|
||
$('#picUpload' + id).click();
|
||
});
|
||
if ($('.giftItems input[type=file]').length > 0) {
|
||
var obj = $('.giftItems input[type=file]');
|
||
for (i = 0; i < obj.length; i++) {
|
||
InitPIcs(obj[i], add);
|
||
}
|
||
}
|
||
}
|
||
|
||
function InitPIcs(obj, add) {
|
||
var id = $(obj).attr('data-id');
|
||
$('#picPath' + id).html("<i class=\"fas fa-image\"></i> 選擇檔案");
|
||
readURL(obj, add);
|
||
}
|
||
|
||
function readURL(input, add) {
|
||
var id = $(input).attr('data-id');
|
||
if (input.files && input.files[0]) {
|
||
var reader = new FileReader();
|
||
reader.onload = function (e) {
|
||
$('#picShow' + id).attr('src', e.target.result);
|
||
}
|
||
reader.readAsDataURL(input.files[0]); // convert to base64 string
|
||
//$('#picShow' + id).show();
|
||
$('#fileName' + id).text(input.files[0].name);
|
||
var _type = input.files[0].name.split('.');
|
||
//$('#fileType' + id).text(input.files[0].type);
|
||
$('#fileType' + id).text(_type[_type.length-1]);
|
||
|
||
|
||
var _len = $('input[type="file"]').length;
|
||
var _index = $('#txt' + id).text();
|
||
console.log(_index);
|
||
console.log($('input[type="file"]').length);
|
||
console.log('--------');
|
||
|
||
|
||
|
||
if (_len - _index == 1 && add)
|
||
__doPostBack('<%= AddBtn.UniqueID %>', '');
|
||
|
||
} else if ($('#picShow' + id).attr('data-path') != "") {
|
||
//$('#picShow' + id).show();
|
||
//$('#picShow' + id).attr('src', $('#picShow' + id).attr('data-path'));
|
||
} else {
|
||
$('#picShow' + id).hide();
|
||
}
|
||
}
|
||
|
||
|
||
</script>
|
||
<script>
|
||
let VueApp = new Vue({
|
||
el: '#app',
|
||
vuetify: new Vuetify(vuetify_options),
|
||
data() {
|
||
return {
|
||
news_id: '<%= Request["num"] %>',
|
||
options: {},
|
||
search_dialog: {
|
||
controls: {
|
||
search1: {
|
||
id: 'search1',
|
||
title: '公告分類',
|
||
text_prop: 'kind',
|
||
value_prop: 'num',
|
||
keys: [
|
||
{ id: 'kind', title: '分類名稱', value: '' },
|
||
|
||
],
|
||
api_url: HTTP_HOST + 'api/news/GetKindList',
|
||
columns: [
|
||
{ id: 'kind', title: '分類名稱', value: '' },
|
||
],
|
||
selected: {},
|
||
select(t) {
|
||
console.log("select search1", t);
|
||
}
|
||
},
|
||
search2: {
|
||
id: 'search2',
|
||
title: '相關活動',
|
||
text_prop: 'subject',
|
||
value_prop: 'num',
|
||
keys: [
|
||
{ id: 'subject', title: '活動名稱', value: '' },
|
||
{ id: 'kindTxt', title: '活動分類' },
|
||
],
|
||
api_url: HTTP_HOST + 'api/activity/GetList',
|
||
columns: [
|
||
{ id: 'subject', title: '活動名稱' },
|
||
{ id: 'kindTxt', title: '活動分類' },
|
||
],
|
||
selected: {},
|
||
select(t) {
|
||
console.log("select search2", t);
|
||
//帶出明細
|
||
if (t != null) {
|
||
|
||
}
|
||
}
|
||
},
|
||
|
||
},
|
||
show: false,
|
||
current: {},
|
||
list: [],
|
||
count: 0,
|
||
page: 1,
|
||
loading: false,
|
||
footer: {
|
||
showFirstLastPage: true,
|
||
disableItemsPerPage: true,
|
||
itemsPerPageAllText: '',
|
||
itemsPerPageText: '',
|
||
},
|
||
},
|
||
snackbar: {
|
||
show: false,
|
||
text: "",
|
||
}
|
||
|
||
}
|
||
},
|
||
mounted() {
|
||
this.search_dialog.current = this.search_dialog.controls.search1
|
||
//console.log("mounted");
|
||
},
|
||
watch: {
|
||
options: {
|
||
handler() {
|
||
//console.log("watch1", this.search_dialog, this.search_dialog.page);
|
||
this.search_get()
|
||
console.log("watch2", this.search_dialog, this.search_dialog.page);
|
||
},
|
||
deep: true,
|
||
},
|
||
},
|
||
methods: {
|
||
search_show(curr) {
|
||
//console.log("btn_click:", curr, curr.api_url);
|
||
this.search_dialog.current = curr;
|
||
this.search_clear()
|
||
//this.search_get()//清除完自動會重抓, 故取消
|
||
this.search_dialog.show = true;
|
||
},
|
||
search_clear() {
|
||
if (!this.search_dialog.current.keys) return;
|
||
this.search_dialog.current.keys.forEach((t, i) => { t.value = '' })
|
||
this.search_get()
|
||
},
|
||
search_get() {
|
||
if (!this.search_dialog.current.keys) return;
|
||
let api_url = this.search_dialog.current.api_url;
|
||
let keys = this.search_dialog.current.keys;
|
||
//const { page, itemsPerPage } = this.options
|
||
//const { sortBy, sortDesc, page, itemsPerPage } = this.options
|
||
this.search_dialog.page = this.options.page ?? 1
|
||
let params = { page: this.search_dialog.page, pageSize: 10 };//url params
|
||
var search = {};//post body
|
||
keys.forEach((t, i) => {
|
||
search[t.id] = t.value;
|
||
});
|
||
//necessary parameter===
|
||
if (this.search_dialog.current.id == 'search1') {
|
||
search['inTime'] = (this.news_id != '' ? false : true);
|
||
}
|
||
|
||
console.log("search_get", api_url, search, params, this.options);
|
||
this.search_dialog.loading = true
|
||
axios.post(api_url, search, { params: params })
|
||
.then(response => {
|
||
this.search_dialog.list = response.data.list
|
||
this.search_dialog.count = response.data.count
|
||
this.search_dialog.loading = false
|
||
})
|
||
.catch(error => {
|
||
console.log(error)
|
||
this.search_dialog.list = []
|
||
this.search_dialog.count = 0
|
||
this.search_dialog.loading = false
|
||
this.snackbar.text = "錯誤:" + error
|
||
this.snackbar.show = true
|
||
})
|
||
},
|
||
search_headers() {
|
||
if (!this.search_dialog.current.columns) return;
|
||
r = [];
|
||
this.search_dialog.current.columns.forEach((t, i) => {
|
||
r.push({
|
||
text: t.title,
|
||
align: 'start',
|
||
sortable: false,
|
||
value: t.id,
|
||
})
|
||
})
|
||
return r
|
||
},
|
||
search_select(row) {
|
||
let curr = this.search_dialog.current;
|
||
let target = $(`[data-search-control=${curr.id}]`);
|
||
curr.selected = row;
|
||
target.children("input.search-text").val(curr.selected[curr.text_prop])//text
|
||
target.children("input:hidden").val(curr.selected[curr.value_prop])//value
|
||
if (curr.select instanceof Function) {
|
||
curr.select(row);
|
||
}
|
||
this.search_dialog.show = false;
|
||
console.log(row, row["u_name"], row["f_number"], curr.id, target);
|
||
},
|
||
},
|
||
computed: {
|
||
},
|
||
})
|
||
</script>
|
||
</asp:Content>
|
||
<asp:Content ID="Content3" ContentPlaceHolderID="page_nav" runat="Server">
|
||
<div class="scroll-nav nav nav-tabs mb-2 mb-sm-0 d-none d-sm-flex">
|
||
</div>
|
||
<div class="">
|
||
<asp:Button ID="add" runat="server" Text="送出" OnClick="add_Click" CssClass="btn btn-primary" />
|
||
<asp:Button ID="edit" runat="server" Text="修改" Visible="false" OnClick="edit_Click" CssClass="btn btn-primary" />
|
||
<asp:Button ID="goback" runat="server" Text="回列表" Visible="false" CausesValidation ="false" OnClick="goback_Click" CssClass="btn btn-outline-secondary" />
|
||
</div>
|
||
</asp:Content>
|
||
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
|
||
<uc1:alert runat="server" ID="L_msg" Text="" />
|
||
<div id="content" class="container-fluid">
|
||
|
||
<div class="card shadow-sm my-2" id="sec2">
|
||
<div class="card-header py-0">
|
||
<nav class="navbar py-0">
|
||
<div class="nav nav-tabs">
|
||
<button class="nav-link active" id="sec2-tab1" data-bs-toggle="tab" data-bs-target="#sec2-page1"
|
||
type="button" role="tab" aria-controls="home" aria-selected="true">
|
||
基本資料</button>
|
||
<button class="nav-link" id="sec2-tab2" data-bs-toggle="tab" data-bs-target="#sec2-page2"
|
||
type="button" role="tab" aria-controls="profile" aria-selected="false">
|
||
檔案管理</button>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="tab-content" id="myTabContent">
|
||
<div class="tab-pane fade show active" id="sec2-page1" role="tabpanel" aria-labelledby="sec2-tab1">
|
||
<div>
|
||
<div class="form-text text-muted">以下 * 欄位為必填欄位</div>
|
||
</div>
|
||
<div class="row mb-1 label-sm-right ">
|
||
<label class="col-sm-2 col-lg-1 col-form-label">標題 *</label>
|
||
<div class="col-sm-10 col-lg-7">
|
||
<asp:TextBox ID="subject" MaxLength="100" runat="server" CssClass="form-control" placeholder="請輸入標題"></asp:TextBox>
|
||
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="subject" runat="server" ErrorMessage="必填！" Display="Dynamic" SetFocusOnError="true"></asp:RequiredFieldValidator>
|
||
</div>
|
||
<label class="col-sm-2 col-lg-1 col-form-label">作者</label>
|
||
<div class="col-sm-10 col-lg-3 pt-2">
|
||
<asp:Literal ID="author" runat="server"></asp:Literal>
|
||
</div>
|
||
</div>
|
||
<div class="row mb-1 label-sm-right ">
|
||
<label class="col-sm-2 col-lg-1 col-form-label">分類 *</label>
|
||
<div class="col-sm-4 col-lg-3">
|
||
|
||
<%-- <asp:DropDownList ID="kind" runat="server" CssClass="form-select">
|
||
<asp:ListItem Value="" Text="請選擇"></asp:ListItem>
|
||
</asp:DropDownList>--%>
|
||
<div class="input-group mb-3" data-search-control="search1" @click="search_show(search_dialog.controls.search1)">
|
||
<input class="form-control search-text" type="text" readonly
|
||
id="kind_txt" runat="server" placeholder="分類" value="">
|
||
<asp:HiddenField ID="kind" runat="server" Value="" />
|
||
<button class="btn btn-outline-secondary" type="button">
|
||
<i class="mdi mdi-view-list-outline"></i>
|
||
</button>
|
||
</div>
|
||
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" ControlToValidate="kind_txt" runat="server" ErrorMessage="必填！" Display="Dynamic" SetFocusOnError="true"></asp:RequiredFieldValidator>
|
||
|
||
</div>
|
||
<label class="col-sm-2 col-lg-1 col-form-label">狀態 *</label>
|
||
<div class="col-sm-4 col-lg-3">
|
||
<asp:DropDownList ID="status" CssClass="form-select" runat="server">
|
||
<asp:ListItem Value="" Text="請選擇"></asp:ListItem>
|
||
<asp:ListItem Value="Y" Text="顯示"></asp:ListItem>
|
||
<asp:ListItem Value="N" Text="隱藏"></asp:ListItem>
|
||
</asp:DropDownList>
|
||
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" ControlToValidate="status" runat="server" ErrorMessage="必填！" Display="Dynamic" SetFocusOnError="true"></asp:RequiredFieldValidator>
|
||
</div>
|
||
<label class="col-sm-2 col-lg-1 col-form-label mt-1 mt-lg-0">置頂</label>
|
||
<div class="col-sm-4 col-lg-3 mt-1 mt-lg-0">
|
||
<label class="col-form-control">
|
||
<input type="checkbox" id="topping" runat="server"
|
||
data-toggle="toggle" data-on="是" data-off="否" data-onstyle="success" />
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="row mb-1 label-sm-right ">
|
||
<label class="col-sm-2 col-lg-1 col-form-label">發佈日 *</label>
|
||
<div class="col-sm-10 col-lg-3">
|
||
<asp:TextBox ID="uptime" runat="server" CssClass="form-control " TextMode="Date" autocomplete="off" data-date-format="yyyy-mm-dd"></asp:TextBox>
|
||
<asp:RequiredFieldValidator ID="RequiredFieldValidator6" ControlToValidate="uptime" runat="server" ErrorMessage="必填！" Display="Dynamic" SetFocusOnError="true"></asp:RequiredFieldValidator>
|
||
</div>
|
||
<label class="col-sm-2 col-lg-1 col-form-label mt-1 mt-lg-0">上架期間</label>
|
||
<div class="col-sm-10 col-lg-7 mt-1 mt-lg-0">
|
||
<div class="input-group">
|
||
<asp:TextBox ID="start_day" CssClass="form-control " autocomplete="off" TextMode="Date" data-date-format="yyyy-mm-dd" runat="server"></asp:TextBox>
|
||
<span class="input-group-text">~</span>
|
||
<asp:TextBox ID="end_day" CssClass="form-control " autocomplete="off" TextMode="Date" data-date-format="yyyy-mm-dd" runat="server"></asp:TextBox>
|
||
</div>
|
||
<div>
|
||
<span class="form-text text-muted">(若不設定，則不限時永久開放)</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row mb-1 label-sm-right ">
|
||
<label class="col-sm-2 col-lg-1 col-form-label">相關活動</label>
|
||
<div class="col-sm-4 col-lg-3">
|
||
<div class="input-group mb-3" data-search-control="search2" @click="search_show(search_dialog.controls.search2)">
|
||
<input class="form-control search-text" type="text" readonly
|
||
id="activity_num_txt" runat="server" placeholder="相關活動" value="">
|
||
<asp:HiddenField ID="activity_num" runat="server" Value="" />
|
||
<button class="btn btn-outline-secondary" type="button">
|
||
<i class="mdi mdi-view-list-outline"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<hr />
|
||
<div class="row mb-1">
|
||
<label class="col-form-label">備註</label>
|
||
<div class="">
|
||
<asp:TextBox ID="demo" runat="server" Rows="5" TextMode="MultiLine" CssClass="form-control" placeholder="請輸入備註"></asp:TextBox>
|
||
</div>
|
||
</div>
|
||
<div class="row mb-1">
|
||
<label class="col-form-label">* 內容</label>
|
||
<div class="">
|
||
<asp:TextBox ID="word" runat="server" CssClass="ckeditor" TextMode="MultiLine"></asp:TextBox>
|
||
<asp:RequiredFieldValidator ID="v_word" ControlToValidate="word" runat="server" ErrorMessage="必填！" Display="Dynamic" SetFocusOnError="true" EnableClientScript="False"></asp:RequiredFieldValidator>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-pane fade giftItems" id="sec2-page2" role="tabpanel" aria-labelledby="sec2-tab2">
|
||
<asp:Panel ID="Panel1" runat="server" CssClass="form-group d-none">
|
||
<asp:FileUpload ID="FileUpload1" runat="server" />
|
||
</asp:Panel>
|
||
<div class="form-text text-muted">檔案限制容量4MB，僅接受 jpg,jpeg,png,pdf,doc,docx,xls,xlsx,ppt,pptx 格式</div>
|
||
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
|
||
<ContentTemplate>
|
||
<table class="table table-hover">
|
||
<thead>
|
||
<tr>
|
||
<th><span class="w-1">序</span></th>
|
||
<th><span class="w-2">名稱</span></th>
|
||
<th><span class="w-2">類型</span></th>
|
||
<th><span class="w-1"></span></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<asp:Repeater ID="fileRepeater" runat="server" OnItemDataBound="fileRepeater_ItemDataBound">
|
||
<ItemTemplate>
|
||
<tr>
|
||
<td>
|
||
<span id="txt<%#Eval("num") %>"><asp:Literal ID="index" runat="server" Text='<%# Container.ItemIndex+1 %>' ></asp:Literal></span>
|
||
</td>
|
||
<td>
|
||
<asp:HiddenField ID="id" runat="server" />
|
||
<img id="picShow<%#Eval("num") %>" style="display: none" data-path="<%#!isStrNull(Eval("pic1"))?"../.."+ Model.news.Dir.Replace("~","") +"/"+ValString(Eval("pic1")):"" %>" />
|
||
<asp:HiddenField ID="pic" runat="server" />
|
||
<span id="fileName<%#Eval("num") %>"><asp:Literal ID="pic_name" runat="server"></asp:Literal></span>
|
||
</td>
|
||
<td><span id="fileType<%#Eval("num") %>"><asp:Literal ID="pic_type" runat="server"></asp:Literal></span></td>
|
||
<td class="d-print-none text-end">
|
||
<a id="picPath<%#Eval("num") %>" data-id="<%#Eval("num") %>" class="btn btn-outline-secondary btn-sm picPath" href="javascript:void(0)">選擇檔案</a>
|
||
<asp:LinkButton ID="DelBtn" CssClass="btn btn-outline-secondary btn-sm" runat="server" CausesValidation="false" OnClick="DelBtn_Click">
|
||
<i class="mdi mdi-close-circle"></i> 刪除</asp:LinkButton>
|
||
</td>
|
||
</tr>
|
||
</ItemTemplate>
|
||
</asp:Repeater>
|
||
<tr>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td>
|
||
<asp:LinkButton ID="AddBtn" CssClass="btn" runat="server" CausesValidation="false" OnClick="AddBtn_Click">
|
||
<i class="mdi mdi-plus-circle"></i> 新增</asp:LinkButton>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</ContentTemplate>
|
||
</asp:UpdatePanel>
|
||
<div id="pics" class="d-none"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<v-dialog v-model="search_dialog.show" max-width="500px">
|
||
<v-card>
|
||
<v-card-title class="justify-space-between grey lighten-2">
|
||
查詢:{{search_dialog.current.title}}
|
||
<v-btn icon @click="search_dialog.show=false"><v-icon>mdi-close</v-icon></v-btn>
|
||
</v-card-title>
|
||
<v-card-text >
|
||
<v-row>
|
||
<v-col v-for="item in search_dialog.current.keys"
|
||
:cols="search_dialog.current.keys.length>1?6:12" >
|
||
<v-text-field v-model="item.value" :label="item.title"></v-text-field>
|
||
</v-col>
|
||
<v-col cols="12" class="text-end">
|
||
<v-btn color="primary" elevation="0" @click="search_get()">查詢</v-btn>
|
||
<v-btn elevation="0" @click="search_clear()">清除條件</v-btn>
|
||
</v-col>
|
||
</v-row>
|
||
<v-data-table
|
||
:headers="search_headers()"
|
||
:items="search_dialog.list"
|
||
:footer-props="search_dialog.footer"
|
||
:items-per-page="10"
|
||
:server-items-length="search_dialog.count"
|
||
:page.sync="search_dialog.page"
|
||
:options.sync="options"
|
||
@click:row="search_select"
|
||
></v-data-table>
|
||
</v-card-text>
|
||
<v-card-actions>
|
||
</v-card-actions>
|
||
</v-card>
|
||
</v-dialog>
|
||
<v-snackbar
|
||
v-model="snackbar.show"
|
||
timeout="2000"
|
||
>
|
||
{{ snackbar.text }}
|
||
<template v-slot:action="{ attrs }">
|
||
<v-btn
|
||
text
|
||
v-bind="attrs"
|
||
@click="snackbar.show = false"
|
||
>
|
||
關閉
|
||
</v-btn>
|
||
</template>
|
||
</v-snackbar>
|
||
</div>
|
||
</asp:Content>
|
||
|