123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198 |
- <template>
- <div class="cases">
- <el-button type="primary" @click="openDialog()">新增数据</el-button>
- <el-table border :data="tableData" v-loading="loading" style="width: 100%">
- <el-table-column prop="Id" label="序号" width="180"></el-table-column>
- <el-table-column prop="Year" label="历程年份" width="180"></el-table-column>
- <el-table-column prop="Content" label="历程内容"></el-table-column>
- <el-table-column label="操作">
- <template slot-scope="scope">
- <el-button
- type="primary"
- icon="el-icon-edit"
- @click="handleEdit(scope.$index, scope.row)"
- ></el-button>
- <el-button
- type="danger"
- icon="el-icon-delete"
- @click="handleDelete(scope.$index, scope.row)"
- ></el-button>
- </template>
- </el-table-column>
- </el-table>
- <el-dialog title="发展历程编辑" :visible.sync="dialogFormVisible">
- <el-form :model="formData">
- <el-form-item label="历程年份" :label-width="formLabelWidth">
- <el-input v-model="formData.Year" autocomplete="off"></el-input>
- </el-form-item>
- <el-form-item label="历程内容" :label-width="formLabelWidth">
- <el-input v-model="formData.Content" autocomplete="off"></el-input>
- </el-form-item>
- </el-form>
- <div slot="footer" class="dialog-footer">
- <el-button @click="dialogFormVisible = false">取 消</el-button>
- <el-button type="primary" @click="handleCreateOrModify()">确 定</el-button>
- </div>
- </el-dialog>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- loading: true,
- dialogFormVisible: false,
- formLabelWidth: "120px",
- tableData: [],
- formData: {
- Id: 0,
- Year: "",
- Content: "",
- CreateTime: new Date()
- },
- options: {}
- };
- },
- mounted() {
- let token = "Browser " + sessionStorage.getItem("token");
- //window.console.log(token);
- this.options = {
- headers: {
- Authorization: token
- }
- };
- this.loadData();
- },
- methods: {
- loadData() {
- this.loading = true;
- this.$http
- .get("Course/GetCourseAll")
- .then(response => {
- window.console.log(response);
- this.tableData = response.data;
- this.loading = false;
- })
- .catch(e => {
- this.$message({
- message: "网络或程序异常!" + e,
- type: "error"
- });
- });
- },
- openDialog() {
- // 清除数据
- this.formData.Id = 0;
- this.formData.LoginName = "";
- this.formData.Password = "";
- this.formData.IsAction = true;
- this.formData.CreateTime = new Date();
- this.dialogFormVisible = true;
- },
- // 新增
- handleCreateOrModify() {
- window.console.log(this.formData);
- //window.console.log(JSON.stringify(this.formData));
- if (!this.formData.Id) {
- // ID 无效时 视为新增
- this.loading = true;
- this.$http
- .post("Course/CreateCourse", this.formData, this.options)
- .then(response => {
- this.loading = false;
- window.console.log(response);
- this.$message({
- message: "创建成功!",
- type: "success"
- });
- this.dialogFormVisible = false;
- this.loadData();
- })
- .catch(e => {
- this.$message({
- message: "网络或程序异常!" + e,
- type: "error"
- });
- });
- } else {
- this.loading = true;
- this.$http
- .post("Course/ModifiedCourse", this.formData, this.options)
- .then(response => {
- this.loading = false;
- window.console.log(response);
- this.$message({
- message: "修改成功!",
- type: "success"
- });
- this.dialogFormVisible = false;
- this.loadData();
- })
- .catch(e => {
- this.$message({
- message: "网络或程序异常!" + e,
- type: "error"
- });
- });
- }
- },
- handleEdit(index, row) {
- window.console.log(index, row);
- this.formData = row;
- this.dialogFormVisible = true;
- },
- handleDelete(index, row) {
- window.console.log(index, row);
- this.$confirm("此操作将永久此条数据, 是否继续?", "提示", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning"
- })
- .then(() => {
- // 已确认删除
- // 调接口删除
- this.loading = true;
- this.$http
- .post(`Course/DeleteCourse?id=${row.Id}`, null, this.options)
- .then(response => {
- this.loading = false;
- window.console.log(response);
- this.$message({
- message: "删除成功!",
- type: "success"
- });
- this.loadData();
- })
- .catch(e => {
- this.$message({
- message: "网络或程序异常!" + e,
- type: "error"
- });
- });
- })
- .catch(() => {
- this.$message({
- type: "info",
- message: "已取消删除"
- });
- });
- },
- //时间格式化
- dateFormat: function(row) {
- //row 表示一行数据, CreateTime 表示要格式化的字段名称
- let t = new Date(row.CreateTime);
- return t.getFullYear() + "-" + (t.getMonth() + 1) + "-" + t.getDate();
- }
- }
- };
- </script>
- <style scoped>
- .el-table {
- margin-top: 20px;
- }
- </style>
|