counterDetail.vue 4.8 KB
Newer Older
xd's avatar
xd committed
1 2 3
<template>
  <div class="ct">
    <el-dialog
xd's avatar
xd committed
4
      :visible.sync="detailDialog"
xd's avatar
xd committed
5 6 7 8 9
      width="65%"
      :show-close="false"
    >
      <div class="choose">
        <div class="title">
xd's avatar
xd committed
10
          <div class="cg">柜组详情</div>
xd's avatar
xd committed
11 12 13 14 15
          <div class="circle" @click="handleClose">
            <d2-icon-svg name="close" class="icon" />
          </div>
        </div>
        <div class="br">
xd's avatar
xd committed
16 17 18 19 20 21
          <el-form
            class="searchzone"
            :model="formData"
            label-width="auto"
            disabled
          >
xd's avatar
xd committed
22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
            <el-form-item label="柜组名称:">
              <el-input
                size="small"
                v-model="formData.name"
                style="width:240px"
                placeholder="请输入柜组名称"
              />
            </el-form-item>
            <el-form-item label="柜组编号:">
              <el-input
                size="small"
                v-model="formData.code"
                style="width:240px"
                placeholder="请输入柜组编号"
              />
            </el-form-item>
            <el-form-item label="柜组负责人:">
xd's avatar
xd committed
39
              <el-input
xd's avatar
xd committed
40 41 42
                size="small"
                v-model="formData.people"
                style="width:240px"
xd's avatar
xd committed
43
              />
xd's avatar
xd committed
44
            </el-form-item>
xd's avatar
xd committed
45
            <el-form-item label="所在区域:">
xd's avatar
xd committed
46 47 48 49 50 51 52
              <el-input
                size="small"
                v-model="formData.area"
                style="width:240px"
                placeholder="请输入所在区域"
              />
            </el-form-item>
xd's avatar
xd committed
53 54
            <div class="tb">
              <el-form-item label="门店:"> </el-form-item>
xd's avatar
xd committed
55 56 57 58 59 60 61 62
              <el-table
                stripe
                class="list"
                ref="multipleTable table"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
              >
xd's avatar
xd committed
63 64 65 66 67
                <el-table-column
                  type="index"
                  label="序号"
                  width="60"
                ></el-table-column>
xd's avatar
xd committed
68
                <el-table-column
xd's avatar
xd committed
69
                  prop="name"
xd's avatar
xd committed
70 71 72 73
                  label="柜组名称"
                  align="center"
                ></el-table-column>
                <el-table-column
xd's avatar
xd committed
74
                  prop="signNum"
xd's avatar
xd committed
75 76 77 78
                  label="门牌号"
                  align="center"
                ></el-table-column>
              </el-table>
xd's avatar
xd committed
79
            </div>
xd's avatar
xd committed
80 81 82 83 84 85 86 87
          </el-form>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
xd's avatar
xd committed
88
import { getDetail } from "@/api/in/counter"
xd's avatar
xd committed
89 90
export default {
  props: {
xd's avatar
xd committed
91 92 93
    msgId: {
      type: String,
      default: ''
xd's avatar
xd committed
94 95 96 97
    }
  },
  data() {
    return {
xd's avatar
xd committed
98
      detailDialog: false,
xd's avatar
xd committed
99 100 101 102 103
      formData: {
        name: "",
        code: "",
        people: ""
      },
xd's avatar
xd committed
104
      tableData: [],
xd's avatar
xd committed
105 106 107 108 109 110 111 112 113
      personList: [
        {
          id: "1",
          name: "张三"
        },
        {
          id: "2",
          name: "李四"
        }
xd's avatar
xd committed
114 115 116 117 118 119 120 121 122 123
      ],
      counter:[
        {
          id: "1",
          name: "张三"
        },
        {
          id: "2",
          name: "李四"
        }
xd's avatar
xd committed
124 125 126
      ]
    };
  },
xd's avatar
xd committed
127 128 129
  created() {
    this.getDetail()
  },
xd's avatar
xd committed
130
  methods: {
xd's avatar
xd committed
131 132 133 134 135
    getDetail() {
      this.detailDialog = true
      let params = {
        isDetail: true,
        shopId: this.msgId
Z's avatar
Z committed
136 137
      }
      getDetail(params).then(res => {
xd's avatar
xd committed
138 139 140 141 142 143 144 145 146
        console.log(res,"详情");
        let data = res.data
        this.formData.name = data.shop.name
        this.formData.code = data.shop.num
        this.formData.people = data.shop.principal
        this.formData.area = data.shop.area
        this.tableData = data.stall_unselected
      })
    },
Z's avatar
Z committed
147

xd's avatar
xd committed
148 149 150 151 152 153 154 155
    handleClose(done) {
      this.$confirm("确认关闭?")
        .then(_ => {
          this.detailDialog = false;
          his.$emit('handleDetailClose',"false")
        })
        .catch(_ => {});
    },
xd's avatar
xd committed
156 157
  },
  watch:{
xd's avatar
xd committed
158 159 160 161 162 163
    detailDialog(newValue) {
      // this.getDetail()
      
    },
    
  }
xd's avatar
xd committed
164 165
};
</script>
xd's avatar
xd committed
166
<style>
xd's avatar
xd committed
167
</style>
xd's avatar
xd committed
168
<style scoped>
xd's avatar
xd committed
169 170 171
.tb {
  display: flex;
}
xd's avatar
xd committed
172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219
.choose {
  padding: 16px;
  font-size: 16px;
  font-weight: bold;
  color: rgba(56, 56, 56, 1);
  box-sizing: border-box;
}
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
}
.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}
.ct >>> .el-dialog__header {
  padding: 0 !important;
}
.ct >>> .el-dialog__body {
  padding: 0;
}
.ct >>> .el-transfer-panel {
  width: 250px;
}
.circle {
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(208, 2, 27, 1);
  position: relative;
}
.circle >>> .icon {
  width: 28px;
  height: 28px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.br {
  border-top: 1px solid #f8f8f8;
  border-bottom: 1px solid #f8f8f8;
  padding: 24px 60px;
}
</style>