新建

<template>
  <div class="wrap-page">
    <!-- 进入系统 -->
    <div class="top">
      <div class="left"><span>选择工程项目</span></div>
    </div>
    <div class="conter">
      <div class="conter-top">
        <input type="text" v-model="searchname" />
        <button @click="search">搜索</button>
        <button @click="home">管理我的空间模板</button>
        <!-- <button @click="handleEdit">新建项目</button> -->
        <a-button type="primary" @click="showModal">
          创建项目
        </a-button>
        <a-modal
          v-model="visible"
          ok-text="确认"
          cancel-text="取消"
          @ok="hideModal"
        >
        <div><p>地区</p>
        <p><a-cascader placeholder="请选择" :options="options" change-on-select @change="onChange" /></p></div>
          <p>项目名称</p>
          <p><input v-model="entryname" type="text" /></p>
          <p style="color:red;">{{ names }}</p>
          <p>项目备注</p>
          <p><input v-model="remarks" type="text" /></p>
          <p style="color:red;">{{ addresss }}</p>
        </a-modal>
        <br />
        <br />
      </div>
      <!-- bordered 边框 -->
      <a-table :columns="columns" :data-source="data">
        <!-- v-for="col in ['name', 'age', 'address']" -->
        <template v-for="col in ['name']" :slot="col" slot-scope="text, record">
          <div :key="col">
            <a-input
              v-if="record.editable"
              style="margin: -5px 0"
              :value="text"
              @change="(e) => handleChange(e.target.value, record.key, col)"
            />
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>
        <template slot="operation" slot-scope="text, record">
          <div class="editable-row-operations">
            <span v-if="record.editable">
              <button @click="() => save(record.key)">保存</button>
              <!-- <a-popconfirm title="Sure to cancel?" @confirm="() => cancel(record.key)"> -->
              <a-popconfirm
                title="Sure to can"
                @confirm="() => cancel(record.key)">
                <button>取消</button>
              </a-popconfirm>
            </span>
            <span v-else>
              <button
                :disabled="editingKey !== ''"
                @click="() => edit(record.key)"
              >
                修改项目名称
              </button>
              <button @click="home">进入项目</button>
            </span>
          </div>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
const columns = [
  {
    title: "项目名称",
    dataIndex: "name",
    width: "25%",
    scopedSlots: { customRender: "name" },
  },
  {
    title: "空间",
    dataIndex: "age",
    width: "25%",
    scopedSlots: { customRender: "age" },
  },
  {
    title: "备注",
    dataIndex: "address",
    width: "25%",
    scopedSlots: { customRender: "address" },
  },
  {
    title: "操作",
    width: "25%",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" },
  },
];

const data = [];
for (let i = 0; i < 2; i++) {
  data.push({
    key: i.toString(),
    name: `京津冀空间 ${i}`,
    age: 32,
    address: `hhjh. ${i}`,
  });
}
import http from "../../service/http-service";
export default {
  data() {
    this.cacheData = data.map((item) => ({ ...item }));
    return {
       options: [
        {
          value: '1',
          label: '全部'
        },
        {
          value: '2',
          label: '全国'
        },
        {
          value: '3',
          label: '北京'
        },
        {
          value: '4',
          label: '天津'
        },
        {
          value: '5',
          label: '河北'
        },
        {
          value: '6',
          label: '山西'
        },
        {
          value: '7',
          label: '内蒙古'
        },
        {
          value: '8',
          label: '辽宁'
        },
        {
          value: '9',
          label: '吉林'
        },
        {
          value: '10',
          label: '黑龙江'
        },
        {
          value: '11',
          label: '上海'
        },
        {
          value: '12',
          label: '江苏'
        },
        {
          value: '13',
          label: '浙江'
        },
        {
          value: '14',
          label: '安徽'
        },
        {
          value: '15',
          label: '福建'
        },
        {
          value: '16',
          label: '江西'
        },
        {
          value: '17',
          label: '山东'
        },
        {
          value: '18',
          label: '河南'
        },
        {
          value: '19',
          label: '湖北'
        },
        {
          value: '20',
          label: '湖南'
        },
        {
          value: '21',
          label: '广东'
        },
        {
          value: '22',
          label: '广西'
        },
        {
          value: '23',
          label: '海南'
        },
        {
          value: '24',
          label: '重庆'
        },
        {
          value: '25',
          label: '四川'
        },
        {
          value: '26',
          label: '贵州'
        },
        {
          value: '27',
          label: '云南'
        },
        {
          value: '28',
          label: '西藏'
        },
        {
          value: '29',
          label: '陕西'
        },
        {
          value: '30',
          label: '甘肃'
        },
        {
          value: '31',
          label: '青海'
        },
        {
          value: '32',
          label: '宁夏'
        },
        {
          value: '33',
          label: '新疆'
        }
      ],
      searchname: "",
      data,
      columns,
      editingKey: "",
      names: "",
      addresss: "",
      visible: false,
      entryname: "", // 项目名称
      remarks: "", // 备注
    };
  },
  methods: {
    onChange(value) {
      console.log(value);
    },
    // 搜索
    search() {
      const a = this.data.filter((res) => {
        if (res.name === this.searchname) {
          console.log(res);
          return (res.name = this.searchname);
        }
      });
      this.data = a;
      console.log(a);
    },
    // 对话框
    showModal() {
      (this.entryname = ""), // 项目名称
        (this.remarks = ""); // 备注
      this.visible = true;
    },
    hideModal() {
      //       username:this.username,
      // cont:this.cont,
      //timer:this.ctime
      console.log(this.data);
      if (this.entryname == "") {
        this.names = "项目名称不能为空";
      } else if (this.remarks == "") {
        // alert('请添加备注')
        this.addresss = "请添加备注";
      } else {
        this.data.unshift({
          key: 11,
          name: this.remarks,
          age: 32,
          address: this.remarks,
        });
        this.addresss = "";
        this.names = "";
        this.visible = false;
      }
    },
    // confirm() {
    //   this.$confirm({
    //     title: 'Confirm',
    //     content: 'Bla bla ...',
    //     okText: '确认',
    //     cancelText: '取消',
    //   });
    // },
    handleChange(value, key, column) {
      const newData = [...this.data];
      const target = newData.filter((item) => key === item.key)[0];
      if (target) {
        target[column] = value;
        this.data = newData;
      }
    },
    
    edit(key) {
      const newData = [...this.data];
      const target = newData.filter((item) => key === item.key)[0];
      this.editingKey = key;
      if (target) {
        target.editable = true;
        this.data = newData;
      }
    },
    save(key) {
      const newData = [...this.data];
      const newCacheData = [...this.cacheData];
      const target = newData.filter((item) => key === item.key)[0];
      const targetCache = newCacheData.filter((item) => key === item.key)[0];
      if (target && targetCache) {
        delete target.editable;
        this.data = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = "";
    },
    cancel(key) {
      const newData = [...this.data];
      console.log(newData);
      const target = newData.filter((item) => key === item.key)[0];
      console.log(target);
      this.editingKey = "";
      if (target) {
        Object.assign(
          target,
          this.cacheData.filter((item) => key === item.key)[0]
        );
        delete target.editable;
        this.data = newData;
        console.log(this.data);
      }
    },
    async repairSign() {
      let temp = await http.repairSign();
      console.log(temp);
    },
    async postRegistered() {
      let temp = await http.postRegistered();
      console.log(temp);
    },
    // 新建
    handleEdit(record) {
      this.$emit("onEdit", record);
    },
    home() {
      this.$router.push({
        path: "/Home",
        name: "Home",
      });
    },
  },
  mounted() {
    this.repairSign();
    this.postRegistered();
  },
};
</script>

<style lang="less" scoped>
.wrap-page {
  height: calc(100vh);
  background-color: #f7fafa;
}
.conter {
  margin-top: 0.5rem;
  padding: 0 2rem;
  background-color: white;
  /deep/ .ant-popover-message {
    display: none !important;
  }
}
.conter-top {
  input {
    width: 230px;
    padding: 0.15rem;
    text-indent: 1em;
    border: 1px solid #1890ff;
    border-radius: 0.1rem;
  }
  button {
    background-color: #1890ff;
    color: white;
    padding: 0.1rem;
    font-size: 0.3rem;
    border: none;
    margin: 0.1rem;
    border-radius: 0.1rem;
  }
}
.top {
  width: 100%;
  background-color: white;
  box-shadow: 0 0 7px #ccc;
  padding: 0.1rem;
  .left {
    width: 50%;
    padding: 0.3rem 2rem;
    span {
      background-color: #1890ff;
      font-size: 0.3rem;
      border-radius: 5px;
      letter-spacing: 2px;
      color: white;
      padding: 0.15rem;
      display: inline;
    }
  }
}
// 对话框
/deep/.ant-modal-body {
  input {
    width: 100%;
    padding: 0.1rem 0;
    text-indent: 1em;
    border-radius: 4px;
    border: 1px solid #1890ff;
  }
}
// 进入项目按钮
.editable-row-operations {
  // border: 1px solid red;
  button {
    background-color: #1890ff;
    border: none;
    margin: 0 0.1rem;
    border-radius: 4px;
    padding: 0.05rem 0.1rem;
    color: white;
  }
}
</style>